/* Oração Diária — LP de waitlist
   Tokens conforme DESIGN.md. Não adicione valores fora desta lista. */

:root {
  /* Cor */
  --white: #ffffff;
  --ink: #1d1d1f;
  --gray: #6e6e73;
  --gray-light: #d2d2d7;
  --gray-bg: #f5f5f7;
  --accent: #cceb57;
  --accent-ink: #111113;
  --accent-hover: #bde042;

  /* Tipografia */
  --t-hero: 64px;
  --t-title: 40px;
  --t-lead: 21px;
  --t-body: 17px;
  --t-small: 15px;
  --t-micro: 12px;

  /* Raio */
  --radius: 28px;
  --radius-pill: 999px;

  /* Espaço */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: 140px;

  --container: 980px;
  --transition: 200ms ease;
}

@media (max-width: 768px) {
  :root {
    --t-hero: clamp(32px, 8.5vw, 40px);
    --t-title: clamp(26px, 6.5vw, 30px);
    --t-lead: 18px;
  }
}

/* Reset mínimo */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    system-ui, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ícone do app: única imagem da página. Raio proporcional ao squircle do iOS. */
.app-icon {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--s3);
  border-radius: 22px;
}

/* Emoji — a única ilustração da página */
.emoji {
  display: block;
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--s2);
}

/* ---------- Hero ---------- */

.hero {
  padding-block: var(--s7);
  text-align: center;
}

.hero__title {
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-inline: auto;
}

.hero__lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--gray);
  max-width: 34ch;
  margin: var(--s3) auto 0;
}

/* ---------- Seção padrão ---------- */

.section {
  padding-block: var(--s7);
  text-align: center;
}

.section__title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-inline: auto;
}

/* Container estendido */
.container--wide {
  max-width: 1060px;
}

/* ---------- Statement Manifesto (Seção 2) ---------- */

.section--statement {
  padding-top: clamp(140px, 18vh, 220px);
  padding-bottom: clamp(120px, 16vh, 200px);
}

.statement {
  max-width: 880px;
  margin-inline: auto;
  margin-bottom: 0;
}

/* Grifos: o sublinhado grosso em verde é o mesmo destaque do botão, e é ele
   que puxa o olho pro fim da frase. */
.u-mark {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}

.u-thin {
  text-decoration: underline;
  text-decoration-color: var(--gray-light);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.statement__title {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 600;
  /* Emoji e ícones inline engordam a linha: sem folga elas se tocam. */
  line-height: 1.7;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-align: center;
}

/* Palavras individuais animadas via scroll */
.statement__word {
  display: inline-block;
  opacity: var(--word-opacity, 0.18);
  color: var(--ink);
  transition: opacity 80ms ease-out;
  will-change: opacity;
}

/* Destaque na mesma manuscrita do header (Caveat) */
.statement__serif {
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-style: normal;
  font-weight: 600;
  font-size: 1.34em;
  letter-spacing: 0;
  display: inline;
  color: var(--ink);
}

.statement__serif .statement__highlight {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-style: normal;
  font-size: 0.86em;
  letter-spacing: -0.02em;
}



/* Emojis e Logos inline no texto */
.inline-badge {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.14em;
  border-radius: 0.22em;
  box-shadow: 0 4px 16px rgba(91, 148, 235, 0.32), 0 1px 4px rgba(0, 0, 0, 0.08);
  margin-inline: 0.08em;
  opacity: var(--word-opacity, 0.18);
  filter: grayscale(calc(1 - var(--word-p, 0)));
  transition: transform 180ms ease, filter 120ms ease;
}

.inline-badge:hover {
  transform: scale(1.12);
}

.inline-emoji {
  display: inline-block;
  font-size: 0.92em;
  line-height: 1;
  vertical-align: -0.06em;
  margin-inline: 0.06em;
  opacity: var(--word-opacity, 0.18);
  filter: grayscale(calc(1 - var(--word-p, 0)));
}

.inline-stack {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.16em;
  margin-inline: 0.12em;
  opacity: var(--word-opacity, 0.18);
  filter: grayscale(calc(1 - var(--word-p, 0)));
  transition: opacity 80ms ease-out, filter 120ms ease;
}

.inline-stack img {
  width: 0.94em;
  height: 0.94em;
  border-radius: 0.22em;
  margin-left: -0.28em;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  border: 2px solid var(--white);
  transition: transform 180ms ease, margin 180ms ease;
}

.inline-stack img:first-child {
  margin-left: 0;
}

.inline-stack:hover img {
  margin-left: -0.08em;
}

.statement__highlight {
  display: inline-flex;
  align-items: center;
  background: var(--gray-bg);
  padding: 0.04em 0.34em;
  border-radius: 0.25em;
  color: var(--ink);
  font-weight: 600;
  gap: 0.12em;
  opacity: var(--word-opacity, 0.18);
  filter: grayscale(calc(1 - var(--word-p, 0)));
  transition: opacity 80ms ease-out, filter 120ms ease;
}



.section__lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--gray);
  max-width: 46ch;
  margin: var(--s3) auto 0;
}

/* Prova emprestada: manchete + veículo com link pra fonte (abre em nova aba,
   pra não tirar ninguém da página). */
.proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  max-width: 760px;
  margin: var(--s4) auto 0;
  text-align: left;
}

.proof__card {
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: var(--s4);
}

.proof__quote {
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.proof__source {
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--gray);
  margin-top: var(--s2);
}

.proof__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gray-light);
  transition: text-decoration-color var(--transition);
}

.proof__link:hover {
  text-decoration-color: var(--gray);
}

/* ---------- Como funciona ---------- */

.section--how-it-works {
  padding-block: clamp(120px, 14vh, 180px);
}

/* Abertura em três tempos: deixa cinza, frase à mão, título em SF. É um bloco
   só — o antigo remate do manifesto virou a primeira linha daqui. */
.leadin {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.leadin__eyebrow {
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--gray);
}

.leadin__hand {
  margin-top: clamp(16px, 2.4vh, 28px);
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-weight: 600;
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}

.leadin__title {
  margin-top: clamp(28px, 4vh, 48px);
}

/* ---------- Passos (como funciona): vídeo real + copy, lados alternados --- */

.features {
  display: grid;
  gap: clamp(72px, 11vh, 132px);
  margin: clamp(80px, 12vh, 140px) auto 0;
  list-style: none;
  text-align: left;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

/* Só no desktop o vídeo troca de lado: no mobile todos empilham vídeo → texto. */
@media (min-width: 861px) {
  .feature--reverse .feature__media {
    grid-column: 2;
    grid-row: 1;
  }

  .feature--reverse .feature__body {
    grid-column: 1;
    grid-row: 1;
  }
}

.feature__media {
  display: flex;
  justify-content: center;
}

/* Moldura do celular: a gravação já vem sem bezel, o raio grande devolve
   o formato de tela de iPhone sem desenhar um mockup por cima. */
.feature__phone {
  position: relative;
  width: 100%;
  max-width: 288px;
  aspect-ratio: 1000 / 2160;
  border-radius: 42px;
  overflow: hidden;
  background: var(--accent-ink);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 28px 72px -16px rgba(0, 0, 0, 0.24),
    0 8px 24px -6px rgba(0, 0, 0, 0.10);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.feature__phone:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 88px -18px rgba(0, 0, 0, 0.28),
    0 12px 32px -8px rgba(0, 0, 0, 0.12);
}

.feature__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature__body {
  max-width: 30ch;
}

/* Manuscrita — a mesma do statement, pra headline soar como recado à mão. */
.feature__title {
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-weight: 600;
  font-size: clamp(38px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--ink);
}

.feature__text {
  margin-top: var(--s2);
  font-size: var(--t-lead);
  /* Folgado porque os emojis grandes e girados invadem a entrelinha. */
  line-height: 1.7;
  color: var(--gray);
}

/* Emoji e logo dentro do parágrafo: mesma linguagem do statement, só que
   sempre opacos (lá a opacidade é animada pelo scroll). */
.feature__ico {
  display: inline-block;
  font-size: 1.55em;
  line-height: 1;
  vertical-align: -0.24em;
  margin-inline: 0.06em;
}

/* Cada emoji do parágrafo cai num ângulo e numa altura diferente: colados na
   linha de base eles parecem ícone de sistema, tortos parecem colados à mão. */
.feature__text .feature__ico:nth-of-type(1) {
  transform: rotate(-10deg) translateY(-3px);
}

.feature__text .feature__ico:nth-of-type(2) {
  transform: rotate(7deg) translateY(4px);
}

.feature__text .feature__ico:nth-of-type(3) {
  transform: rotate(-6deg) translateY(-2px);
}

.feature__logo {
  display: inline-block;
  width: 1.16em;
  height: 1.16em;
  vertical-align: -0.26em;
  border-radius: 0.28em;
  margin-inline: 0.06em;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  transition: transform 180ms ease;
}

.feature__logo:hover {
  transform: scale(1.12);
}

/* Abaixo de 861px as duas colunas ficariam estreitas demais: empilha e centra. */
@media (max-width: 860px) {
  .features {
    gap: var(--s6);
  }

  .feature {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--s4);
    text-align: center;
  }

  .feature__body {
    max-width: 34ch;
  }
}

/* ---------- Fecho: o amanhecer ---------- */

.section--close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(120px, 16vh, 190px);
  padding-bottom: clamp(88px, 11vh, 132px);
}

.sunrise {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Halo largo: o céu clareando. Fica sempre, o disco é que sobe. */
.sunrise__glow {
  position: absolute;
  left: 50%;
  bottom: 27%;
  width: min(1200px, 130vw);
  height: min(620px, 62vh);
  translate: -50% 34%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(255, 205, 148, 0.3) 0%,
    rgba(255, 222, 180, 0.16) 34%,
    rgba(255, 240, 224, 0.07) 60%,
    rgba(255, 255, 255, 0) 78%
  );
}

/* O palco termina na linha do horizonte: o que passa dela é recortado, então
   o sol emerge pela metade em vez de flutuar como bola no meio do texto. */
.sunrise__stage {
  position: absolute;
  inset: 0 0 27% 0;
  overflow: hidden;
}

.sunrise__disc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(620px, 76vw);
  aspect-ratio: 1;
  translate: -50% 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 248, 235, 0.92) 0%,
    rgba(255, 226, 185, 0.7) 36%,
    rgba(255, 202, 141, 0.48) 58%,
    rgba(255, 194, 128, 0) 74%
  );
  filter: blur(18px);
}

/* Só a terra entra no filtro: é a LINHA que precisa tremer, não o sol.
   O haze fica de fora porque backdrop-filter não sobrevive dentro de filter. */
.sunrise__land {
  position: absolute;
  inset: 0;
  filter: url(#heat-haze);
}

/* Chão: o calor que sobra abaixo da linha. Sem ele, o horizonte vira régua. */
.sunrise__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  background: linear-gradient(
    180deg,
    rgba(255, 214, 170, 0.28) 0%,
    rgba(255, 230, 200, 0.12) 38%,
    rgba(255, 255, 255, 0) 82%
  );
}

/* O <svg> só existe pra hospedar o filtro: não ocupa espaço. */
.sunrise__filter {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Faixa de calor: as camadas borram o que já foi pintado atrás (sol e chão),
   nunca o texto — o .sunrise inteiro vive em z-index -1. */
.sunrise__haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 27%;
  height: 176px;
  translate: 0 50%;
  overflow: hidden;
  pointer-events: none;
}

.sunrise__haze i {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) var(--m1),
    rgba(0, 0, 0, 1) var(--m2),
    rgba(0, 0, 0, 1) var(--m3),
    rgba(0, 0, 0, 0) var(--m4)
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) var(--m1),
    rgba(0, 0, 0, 1) var(--m2),
    rgba(0, 0, 0, 1) var(--m3),
    rgba(0, 0, 0, 0) var(--m4)
  );
}

/* Linha do horizonte: some nas pontas pra não virar borda de caixa. */
.sunrise__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 27%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(150, 96, 40, 0) 0%,
    rgba(150, 96, 40, 0.34) 22%,
    rgba(150, 96, 40, 0.34) 78%,
    rgba(150, 96, 40, 0) 100%
  );
}

/* O sol sobe conforme a seção atravessa a tela. Sem JS: timeline de scroll. */
@supports (animation-timeline: view()) {
  .sunrise__disc {
    animation: sun-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 62%;
  }

  .sunrise__glow {
    animation: sun-glow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 55%;
  }
}

/* Sem suporte a scroll-timeline o sol já nasceu: nada de céu vazio. */
@supports not (animation-timeline: view()) {
  .sunrise__disc {
    translate: -50% 55%;
  }
}

@keyframes sun-rise {
  from {
    translate: -50% 100%;
  }
  to {
    translate: -50% 55%;
  }
}

@keyframes sun-glow {
  from {
    translate: -50% 34%;
    opacity: 0.3;
  }
  to {
    translate: -50% 6%;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sunrise__disc,
  .sunrise__glow {
    animation: none;
  }

  .sunrise__disc {
    translate: -50% 55%;
  }
}

.close__title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-inline: auto;
}

/* A segunda linha é a promessa: vai na manuscrita, e maior que o resto. */
.close__hand {
  display: block;
  margin-top: clamp(8px, 1.4vh, 16px);
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-weight: 600;
  font-size: clamp(46px, 6.8vw, 82px);
  line-height: 1;
  letter-spacing: 0;
}

/* Sobre o céu, o form precisa de fundo próprio pra não perder contraste. */
.close .waitlist {
  /* Ar extra: é nesse vão que a linha do horizonte passa. */
  margin-top: var(--s5);
}

/* No celular o form empilha e fica mais alto: o horizonte sobe junto, senão
   a linha corta o campo de e-mail no meio. */
@media (max-width: 580px) {
  .sunrise__stage {
    inset: 0 0 40% 0;
  }

  .sunrise__ground,
  .sunrise__horizon,
  .sunrise__haze {
    bottom: 40%;
  }

  .sunrise__haze {
    height: 96px;
  }

  .sunrise__ground {
    bottom: 0;
    height: 40%;
  }

  .sunrise__glow {
    bottom: 40%;
  }
}

.close .waitlist__box {
  max-width: 490px;
  margin-inline: auto;
}

.close .waitlist__form {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(29, 29, 31, 0.1);
  box-shadow: 0 12px 40px -12px rgba(120, 80, 20, 0.18);
}

/* ---------- Objeções em forma de conversa ---------- */

.chat {
  max-width: 680px;
  margin: var(--s6) auto 0;
  text-align: left;
}

.chat__turn + .chat__turn {
  margin-top: clamp(48px, 6vh, 72px);
}

/* A dúvida chega em bolha, encostada à esquerda. */
.chat__q {
  display: flex;
}

.chat__bubble {
  position: relative;
  max-width: 74%;
  padding: 14px 22px;
  border-radius: 22px;
  background: var(--gray-bg);
  color: var(--ink);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  opacity: 1;
  transform: none;
}

/* Cauda: duas curvas recortadas, a segunda pinta o fundo por cima. */
.chat__bubble::before,
.chat__bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 18px;
}

.chat__bubble::before {
  left: -7px;
  width: 20px;
  background: var(--gray-bg);
  border-bottom-right-radius: 16px;
}

.chat__bubble::after {
  left: -20px;
  width: 20px;
  background: var(--white);
  border-bottom-right-radius: 12px;
}

.chat__turn.is-in .chat__bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* A resposta não tem bolha: é texto solto do outro lado, pra sobrar ar. */
.chat__a {
  max-width: 76%;
  margin-left: auto;
  margin-top: var(--s3);
}

.chat__text {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--gray);
  opacity: 1;
  transform: none;
}

.chat__turn.is-answered .chat__text {
  opacity: 1;
  transform: translateY(0);
}

/* "•••" — vive só entre a bolha e a resposta. */
.chat__typing {
  display: none !important;
  align-items: center;
  gap: 5px;
  height: 20px;
}

.chat__turn.is-typing .chat__typing {
  display: inline-flex;
}

.chat__typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-light);
  animation: chat-dot 1s infinite ease-in-out;
}

.chat__typing i:nth-child(2) {
  animation-delay: 0.16s;
}

.chat__typing i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes chat-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat__bubble,
  .chat__text {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .chat__typing {
    display: none !important;
  }
}

@media (max-width: 580px) {
  .chat__bubble {
    max-width: 88%;
    font-size: var(--t-body);
  }

  .chat__a {
    max-width: 92%;
  }
}

/* Frase de remate: mesma medida do lead, mas em preto — é ela que vira a chave. */
.section__kicker {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
  margin: var(--s3) auto 0;
}

/* Depois dos cards o remate precisa de mais ar pra não colar na caixa cinza. */
.proof + .section__kicker {
  margin-top: var(--s4);
}

/* ---------- Download na App Store ---------- */

.app-store-download {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  margin-top: var(--s4);
}

.app-store-badge-link {
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
}

.app-store-badge-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

.app-store-badge {
  display: block;
  width: 180px;
  height: auto;
}

.app-store-download__note {
  color: var(--gray);
  font-size: var(--t-micro);
  line-height: 1.4;
}

.close .app-store-download {
  align-items: center;
  margin-top: var(--s5);
}

/* ---------- Formulário legado de waitlist ---------- */

.waitlist {
  margin-top: var(--s4);
}

.waitlist__box {
  max-width: 490px;
  position: relative;
}

.waitlist__form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--gray-bg);
  border: 1px solid rgba(210, 210, 215, 0.8);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all var(--transition);
}

.waitlist__form:focus-within {
  border-color: var(--ink);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--ink), 0 8px 24px rgba(0, 0, 0, 0.07);
}

.waitlist__input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.waitlist__appstore-icon {
  width: 18px;
  height: 18px;
  color: var(--ink);
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.waitlist__form:focus-within .waitlist__appstore-icon {
  opacity: 0.95;
}

.waitlist__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-body);
  outline: none;
  min-height: 40px;
  -webkit-text-fill-color: var(--ink);
}

/* Evita que o preenchimento automático do Chrome/Safari tinja o input de azul */
.waitlist__input:-webkit-autofill,
.waitlist__input:-webkit-autofill:hover,
.waitlist__input:-webkit-autofill:focus,
.waitlist__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: transparent !important;
}

.waitlist__input::placeholder {
  color: var(--gray);
  opacity: 0.55;
}

.waitlist__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 20px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(204, 235, 87, 0.4);
  transition: all var(--transition);
  position: relative;
}

.waitlist__btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(204, 235, 87, 0.55);
}

.waitlist__btn:active {
  transform: scale(0.97);
}

.button__icon {
  font-size: 14px;
  transition: transform var(--transition);
}

.waitlist__btn:hover .button__icon {
  transform: translateX(3px);
}

/* ESTADO 2: Carregando */
.button__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(17, 17, 19, 0.2);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: waitlistSpin 0.7s linear infinite;
}

.waitlist__form--loading .button__text,
.waitlist__form--loading .button__icon {
  display: none;
}

.waitlist__form--loading .button__spinner {
  display: inline-block;
}

.waitlist__form--loading .waitlist__btn {
  pointer-events: none;
  opacity: 0.85;
}

@keyframes waitlistSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ESTADO 3: Card de Confirmação In-place */
.waitlist__success {
  background: var(--gray-bg);
  border: 1px solid rgba(204, 235, 87, 0.6);
  border-radius: 20px;
  padding: var(--s3);
  text-align: left;
  animation: successSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.waitlist__success-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(204, 235, 87, 0.25);
  color: var(--ink);
  font-size: var(--t-micro);
  font-weight: 600;
  margin-bottom: var(--s1);
}

.waitlist__success-check {
  font-weight: 700;
}

.waitlist__success-title {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.waitlist__success-desc {
  font-size: var(--t-small);
  color: var(--gray);
  margin-top: 4px;
  line-height: 1.4;
}

.waitlist__success-actions {
  margin-top: var(--s2);
}

.waitlist__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  transition: all var(--transition);
}

.waitlist__share-btn:hover {
  text-decoration-color: var(--ink);
}

.waitlist__note--done {
  color: var(--ink);
  font-weight: 600;
}

.waitlist__note--error {
  color: #d93025;
}

.waitlist__note {
  font-size: var(--t-micro);
  line-height: 1.3;
  color: var(--gray);
  margin-top: var(--s2);
}

@media (max-width: 768px) {
  .hero,
  .section {
    padding-block: var(--s5);
  }

  .proof {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  .features {
    margin-top: var(--s5);
  }
}

@media (max-width: 580px) {
  .waitlist__form {
    flex-direction: column;
    padding: 8px;
    border-radius: 24px;
  }

  .waitlist__input-wrap {
    width: 100%;
    padding: 4px 8px;
  }

  .waitlist__btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ---------- Rodapé ---------- */

.footer {
  padding-top: var(--s5);
  border-top: 1px solid var(--gray-light);
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s2);
}

/* Card de marca: o azul vem do próprio ícone do app, não é cor nova. */
.footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4);
  border-radius: var(--radius);
  background: #4a9bff;
}

.footer__icon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
}

.footer__tagline {
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--white);
}

.footer__tagline span {
  display: block;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

.footer__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--gray-bg);
}

/* Relógio ao vivo */
.footer__clock {
  display: flex;
  align-items: baseline;
  gap: var(--s1);
  font-size: var(--t-small);
  color: var(--gray);
}

.footer__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  align-self: center;
  animation: pulse 2.4s ease-in-out infinite;
}

.footer__time {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
}

/* Assinatura: única exceção à escala de fonte, e só aqui. Escala com a tela
   pra ocupar a largura do container sem quebrar linha. */
.footer__wordmark {
  margin-top: var(--s4);
  /* Cortada pela base: some metade da altura da linha. */
  margin-bottom: -0.24em;
  font-size: clamp(38px, 12vw, 260px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--gray-bg);
  white-space: nowrap;
  user-select: none;
}

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--t-micro);
  color: var(--gray);
}

.footer__nav {
  display: flex;
  gap: var(--s3);
}

.footer__link {
  color: var(--gray);
  text-decoration: none;
  transition: color var(--transition);
}

.footer__link:hover {
  color: var(--ink);
}

.footer__apple-credit {
  margin-top: var(--s2);
  max-width: 62ch;
  color: var(--gray);
  font-size: 10px;
  line-height: 1.45;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__brand {
    gap: var(--s4);
  }

  .footer__panel {
    gap: var(--s4);
  }

  .footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }
}

/* ---------- Modal de Sucesso (Glassmorphism & Progressive Blur) ---------- */

.modal {
  width: min(380px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 32px;
  background: transparent;
  color: var(--white);
  overflow: visible;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.modal[open] {
  animation: modal-in 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal__card {
  position: relative;
  width: 100%;
  height: 530px;
  max-height: 85vh;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 20px 24px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow:
    0 32px 80px -16px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
  background: #181d19;
}

/* Imagem de fundo real */
/* <picture> não pode virar item do flex do card — o img é quem se posiciona */
.modal__card > picture {
  display: contents;
}

.modal__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  z-index: 0;
}

/* Blur progressivo sobre o fundo da imagem */
.modal__blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.4) 52%,
    rgba(0, 0, 0, 0.9) 68%,
    black 82%,
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, 0.4) 52%,
    rgba(0, 0, 0, 0.9) 68%,
    black 82%,
    black 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Scrim suave translúcido apenas para garantir contraste tipográfico sem apagar a imagem */
.modal__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 38%,
    rgba(10, 16, 12, 0.15) 54%,
    rgba(10, 16, 12, 0.45) 72%,
    rgba(10, 16, 12, 0.7) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(15, 22, 18, 0.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  z-index: 10;
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.06);
}

.modal__top-meta {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-start;
}

.modal__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(15, 22, 18, 0.35);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-size: 11px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modal__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(204, 235, 87, 0.9);
}

/* Conteúdo sobre a área borrada da foto */
.modal__content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding-inline: 4px;
}

.modal__title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8);
}

.modal__subtitle {
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.95);
  max-width: 30ch;
  margin-inline: auto;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.8);
}

.modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.modal__btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  border: none;
}

.modal__btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 20px rgba(204, 235, 87, 0.4);
}

.modal__btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(204, 235, 87, 0.55);
}

.modal__btn--secondary {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.modal__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Entrada ---------- */

.reveal {
  animation: reveal 500ms ease-out both;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .footer__dot {
    animation: none;
  }

  .button:active {
    transform: none;
  }
}

/* Páginas legais (/termos, /privacidade)
   Mesmos tokens da LP: coluna estreita, texto grande e muito respiro. Documento
   legal que ninguém consegue ler é documento que não cumpre a função. */

.legal {
  padding: var(--s5) 0 var(--s6);
}

.legal .container {
  max-width: 720px;
}

.legal__back {
  display: inline-block;
  margin-bottom: var(--s4);
  font-size: var(--t-small);
  color: var(--gray);
  text-decoration: none;
  transition: color var(--transition);
}

.legal__back:hover {
  color: var(--ink);
}

.legal__title {
  font-size: var(--t-title);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.legal__date {
  margin-top: var(--s2);
  font-size: var(--t-small);
  color: var(--gray);
}

.legal__lead {
  margin-top: var(--s4);
  font-size: var(--t-lead);
  line-height: 1.5;
}

.legal h2 {
  margin-top: var(--s4);
  margin-bottom: var(--s2);
  font-size: var(--t-body);
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--gray);
}

.legal p + p {
  margin-top: var(--s2);
}

.legal ul {
  margin-top: var(--s2);
  padding-left: var(--s3);
}

.legal li + li {
  margin-top: var(--s1);
}

.legal strong {
  color: var(--ink);
}

.legal a {
  color: var(--ink);
}

.legal__footer {
  padding: var(--s4) 0 var(--s5);
  border-top: 1px solid var(--gray-light);
}

.legal__footer .container {
  display: flex;
  gap: var(--s3);
  max-width: 720px;
  font-size: var(--t-small);
}

.legal__footer a {
  color: var(--gray);
  text-decoration: none;
  transition: color var(--transition);
}

.legal__footer a:hover {
  color: var(--ink);
}

/* ============================================================
   HERO — Split 50/50: Texto e CTA à Esquerda, Celular à Direita
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--s5);
  text-align: left;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--s4);
  text-align: left;
}

.hero__top-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.hero .app-icon {
  margin: 0;
  width: 80px;
  height: 80px;
}

.hero__availability {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: -0.01em;
}

.hero__title {
  margin-inline: 0;
  max-width: 14ch;
}

/* Tipografia editorial chique com serif italiana/editorial + sublinhado no verde do app */
.hero__highlight {
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-style: normal;
  font-weight: 600;
  font-size: 1.28em;
  /* Sem isso, o corpo maior da manuscrita empurra a linha inteira pra baixo e
     abre um vão contra a linha de cima. */
  line-height: 0.8;
  letter-spacing: 0;
  color: var(--ink);
  padding-inline: 2px;
  position: relative;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.hero__lead {
  margin-inline: 0;
  max-width: 36ch;
}

.hero .app-store-download {
  margin-inline: 0;
}

.hero__proof-micro {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--gray);
}

.hero__proof-sep {
  opacity: 0.5;
}

@media (min-width: 900px) {
  .hero__content > * {
    max-width: 46%;
  }

  .hero__title {
    max-width: min(46%, 14ch);
  }

  .hero__lead {
    max-width: min(46%, 36ch);
  }
}

@media (max-width: 899px) {
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding-top: var(--s4);
    padding-bottom: clamp(400px, 55vh, 480px);
    text-align: center;
  }

  .hero__content {
    text-align: center;
  }

  .hero__top-meta {
    align-items: center;
  }

  .hero__proof-micro {
    justify-content: center;
  }

  .hero .app-icon,
  .hero__title,
  .hero__lead,
  .hero .app-store-download {
    margin-inline: auto;
  }

  .hero .app-store-download {
    align-items: center;
  }
}













/* ============================================================
   PROVA — dois números, não dois parágrafos
   O card cinza saiu: o que segura a atenção aqui é o número, e ele precisa de
   branco em volta, não de caixa.
   ============================================================ */

.proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  max-width: 880px;
  margin: clamp(56px, 8vh, 96px) auto 0;
  text-align: left;
}

.proof__stat {
  background: none;
  padding: 0;
  border-radius: 0;
}

.proof__number {
  display: block;
  font-size: clamp(56px, 8vw, 92px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* "em cada" e "min" acompanham o número mas não competem com ele. */
.proof__unit {
  font-size: 0.34em;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--gray);
}

.proof__claim {
  margin-top: var(--s3);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  max-width: 30ch;
}

.proof__source {
  margin-top: var(--s2);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--gray);
}

@media (max-width: 700px) {
  .proof {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

/* Sub-headline da hero com a mesma cara do texto de prova: a sans do sistema,
   em preto. A diferença que se via não era a família — era a cor cinza. */
.hero__lead {
  font-family: inherit;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0;
}

/* ============================================================
   PROGRESSIVE GRADIENT BLUR (Macfolio / Linear Apple Glass)
   ============================================================ */

.bottom-page-blur {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

/* No celular a faixa cai em cima dos vídeos: sobre imagem colorida o degrau
   entre as camadas aparece como um retângulo borrado, não como fade. */
@media (max-width: 899px) {
  .bottom-page-blur {
    display: none;
  }
}

.progressive-blur-layer {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) var(--mask-start),
    rgba(0, 0, 0, 1) var(--mask-mid1),
    rgba(0, 0, 0, 1) var(--mask-mid2),
    rgba(0, 0, 0, 0) var(--mask-end)
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) var(--mask-start),
    rgba(0, 0, 0, 1) var(--mask-mid1),
    rgba(0, 0, 0, 1) var(--mask-mid2),
    rgba(0, 0, 0, 0) var(--mask-end)
  );
}