:root {
  /* --page-bg é exatamente a cor em que o gradiente do .hero termina (75%),
     então a emenda entre o hero e o resto da página é invisível — o fade do
     .hero::after deixa de clarear e só garante a costura. */
  --page-bg: #0f1526;
  /* Paleta do card escolhida por contraste medido (WCAG), não pela aparência:
     texto 15.4:1, rótulo 8.7:1, placeholder 5.0:1, borda de campo 3.7:1 e
     botão 6.5:1 — todos acima do mínimo exigido. */
  --surface: #ffffff;
  --input-bg: #ffffff;
  --ink: #1b2537;
  --ink-soft: #4d5b73;
  --placeholder: #63708a;
  --accent: #2f5f9c;
  --btn-ink: #ffffff;
  --border: #75869e;
  /* Texto que fica sobre o fundo escuro da página (versículo do rodapé). */
  --on-dark-soft: #b8c8de;
  --card-lift: -84px;
  --card-shadow: 0 26px 55px -30px rgba(15, 25, 45, 0.35);
  --font-display: "Libre Baskerville", Georgia, serif;
  --font-body: Optima, Candara, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  /* Scrollbar e controles nativos na variante escura, para acompanhar o fundo
     da página. Os campos do formulário revertem para light — ver .field. */
  color-scheme: dark;
  background: var(--page-bg);
  /* A página é escura, então o texto herdado é claro; quem inverte é o card,
     que define a própria cor. Ao contrário disso, qualquer texto novo fora do
     card nasceria escuro sobre escuro, ou seja, invisível. */
  color: var(--on-dark-soft);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* O stop mais escuro termina em 75% (não 92%) pra já estar totalmente
     escuro antes da zona de fade do .hero::after — evita que os dois
     gradientes disputem a mesma faixa (um ainda escurecendo, o outro já
     clareando de volta), o que criava um vinco/faixa clara indevida. */
  background: radial-gradient(115% 85% at 70% -12%, #fff8e6 0%, #dcebfb 12%, #8fb8e0 26%, #4d6fa0 46%, #223354 58%, #0f1526 75%);
}
.brand-row {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  color: #fffaf0;
  text-shadow: 0 1px 14px rgba(6, 12, 26, 0.55);
}
.brand-mark { flex: none; }

.hero-inner {
  position: relative;
  z-index: 5;
  max-width: 760px;
  margin: 0 auto;
  padding: 108px 24px 168px;
  text-align: center;
}
.hero-inner::before {
  content: '';
  position: absolute;
  inset: -60px -32px;
  z-index: -1;
  background: radial-gradient(65% 75% at 50% 42%, rgba(5, 10, 22, 0.62), rgba(5, 10, 22, 0.28) 55%, rgba(5, 10, 22, 0) 78%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(15, 21, 38, 0) 0%, var(--page-bg) 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-verse { margin: 0; }
.hero-verse h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  line-height: 1.22;
  font-size: clamp(28px, 3.8vw, 52px);
  margin: 0 0 26px;
  text-wrap: balance;
  color: #f6faff;
}
.hero-verse cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #cfe0f4;
}

.rays { position: absolute; inset: 0; z-index: 1; }
.ray {
  position: absolute;
  left: 62%;
  top: 6%;
  height: 780px;
  /* O raio some totalmente em 40% do próprio comprimento (não nos 100%)
     pra não sobrar brilho residual na faixa onde o .hero::after clareia
     o fundo — antes disso, os raios ainda visíveis ali criavam listras
     por cima do degradê de saída, um vinco só perceptível no conteúdo
     central (onde os raios quase verticais permanecem). */
  background: linear-gradient(to bottom, rgba(224, 238, 255, 0.7) 0%, rgba(224, 238, 255, 0) 40%);
  transform-origin: top center;
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: rayIn 1.1s ease-out both;
}
.ray.r1 { width: 10px; transform: translateX(-50%) rotate(-52deg); opacity: 0.55; }
.ray.r2 { width: 16px; transform: translateX(-50%) rotate(-33deg); opacity: 0.7; animation-delay: 0.05s; }
.ray.r3 { width: 9px;  transform: translateX(-50%) rotate(-15deg); opacity: 0.5; animation-delay: 0.1s; }
.ray.r4 { width: 20px; transform: translateX(-50%) rotate(3deg);   opacity: 0.8; animation-delay: 0.02s; }
.ray.r5 { width: 12px; transform: translateX(-50%) rotate(21deg);  opacity: 0.55; animation-delay: 0.12s; }
.ray.r6 { width: 18px; transform: translateX(-50%) rotate(39deg);  opacity: 0.65; animation-delay: 0.07s; }
.ray.r7 { width: 8px;  transform: translateX(-50%) rotate(57deg);  opacity: 0.4; animation-delay: 0.15s; }

/* As nuvens (.cloud c1/c2/c3) foram removidas: eram manchas de azul-escuro
   pensadas pra dar volume ao céu claro, e no tema escuro só produziam
   variação de tom assimétrica — duas à esquerda, uma à direita. */

.motes { position: absolute; inset: 0; z-index: 4; }
.mote { position: absolute; border-radius: 50%; background: rgba(217, 233, 255, 0.9); filter: blur(1px); animation: moteDrift 6s ease-in-out infinite; }

@keyframes rayIn { from { opacity: 0; transform: translateX(-50%) rotate(0deg) scaleY(0.85); } }
@keyframes moteDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .ray { animation: none; }
  .mote { animation: none; }
  .form-card, .confirm-card { transition: none; }
  .prayer-counter #prayer-counter-number.is-bumping { animation: none; }
}

/* O padding de baixo é o vão entre o card e o versículo do rodapé: 96px abria
   um buraco no fundo escuro, onde não há nada para preencher o espaço. */
.content-wrap { max-width: 640px; margin: 0 auto; padding: 0 24px 44px; }

.form-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 40px clamp(24px, 5vw, 48px);
  margin-top: var(--card-lift);
  position: relative;
  z-index: 3;
  box-shadow: var(--card-shadow);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.form-card.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
}
.field { margin-bottom: 26px; }
/* Rótulo em caixa alta miúda vira desenho antes de virar palavra — aqui é
   texto normal, grande e escuro. */
.field label {
  display: block;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.field .optional { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 19px;
  color: var(--ink);
  /* Campo com 58px de altura: alvo confortável no toque e no mouse. */
  padding: 15px 16px;
  border-radius: 4px;
  border: 2px solid var(--border);
  background: var(--input-bg);
  /* O html está em color-scheme: dark por causa do fundo da página; sem isto o
     autofill do Chrome pintaria de escuro o campo, que é branco. */
  color-scheme: light;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field textarea { min-height: 140px; line-height: 1.6; }
/* Foco grosso e afastado: quem navega por teclado enxerga onde está. */
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile { display: flex; justify-content: center; margin-top: 26px; }

.btn-primary {
  width: 100%;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--btn-ink);
  background: var(--accent);
  border: none;
  border-radius: 4px;
  padding: 18px 20px;
  margin-top: 4px;
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.08); }
/* opacity derrubaria junto o contraste do texto — o desabilitado usa um cinza
   que continua legível. */
.btn-primary:disabled { background: #6a778c; cursor: not-allowed; }
.btn-primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Negrito porque cor sozinha não comunica erro a quem não a distingue. */
.form-error { color: #b3261e; font-weight: 600; font-size: 17px; text-align: center; margin: 16px 0 0; }

.confirm-card {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 36px 32px;
  text-align: center;
  margin-top: var(--card-lift);
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.confirm-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.confirm-card p {
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 23px);
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
}

/* Largura suficiente para o versículo caber numa linha só na fonte maior. */
.site-footer { max-width: 900px; margin: 0 auto; padding: 0 24px 56px; text-align: center; }
/* O rodapé fica sobre o fundo escuro, então usa o token de texto claro.
   O balance evita que a referência ("— João 1:5") caia sozinha numa linha. */
.verse { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--on-dark-soft); margin: 0; text-wrap: balance; }

.prayer-counter {
  font-size: 15px;
  color: var(--on-dark-soft);
  opacity: 0.85;
  margin: 18px 0 0;
}
.prayer-counter #prayer-counter-number {
  display: inline-block;
  font-weight: 700;
  font-size: 17px;
  color: #f6faff;
}
/* Pulso rápido no número quando o total muda — não no texto inteiro, pra não
   distrair de quem está preenchendo o formulário logo acima. */
.prayer-counter #prayer-counter-number.is-bumping {
  animation: prayerCounterBump 0.5s ease-out;
}
@keyframes prayerCounterBump {
  0% { transform: scale(1); color: #f6faff; }
  35% { transform: scale(1.35); color: var(--accent); }
  100% { transform: scale(1); color: #f6faff; }
}

@media (max-width: 560px) {
  .form-card, .confirm-card { padding: 30px 22px; }
  /* A 20px o rótulo do botão não cabe numa linha na largura de um celular. */
  .btn-primary { font-size: 18px; }
}

@media (max-width: 400px) {
  /* Em telas bem estreitas (ex: 320px) a logo no tamanho padrão fica
     espremida contra a borda — reduz proporcionalmente. */
  .brand-mark { width: 44px; height: 44px; }
  .brand { font-size: 22px; gap: 10px; }
}

/* Telas grandes: o container central de largura fixa deixava vão vazio
   demais nas laterais em monitores grandes — dá mais espaço ao conteúdo
   e reforça a escala dos raios, sem esticar o texto a ponto de prejudicar
   a leitura (o corpo continua com uma largura de linha confortável). */
@media (min-width: 1400px) {
  .brand-row, .hero-inner { max-width: 1200px; }
  .content-wrap, .site-footer { max-width: 720px; }

  .ray { filter: blur(6px); }
  .ray.r1 { width: 13px; }
  .ray.r2 { width: 21px; }
  .ray.r3 { width: 12px; }
  .ray.r4 { width: 26px; }
  .ray.r5 { width: 16px; }
  .ray.r6 { width: 24px; }
  .ray.r7 { width: 11px; }
}