/* ==========================================================================
   Comind Studio — landing "A Volta Inteira"
   Atos: noite (cap. 1-2) → dia (cap. 3-5) → noite (cap. 6).
   Sem JS a página renderiza completa: círculos fechados, tudo legível.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--color-dark-canvas);
}

/* clip (não hidden): corta vazamentos de transform sem criar scroll container,
   preservando position: sticky */
html, body { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
  :root.no-js { scroll-behavior: smooth; }
}

body {
  margin: 0;
  /* o fundo escuro vive no html: assim a camada .arcs (z-index -1) fica visível */
  color: var(--color-dark-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--color-secondary); color: var(--color-dark-text); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: var(--z-overlay);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
}
.skip-link:focus-visible { top: var(--space-md); }

/* --------------------------------------------------------------------------
   Camada de geometria persistente (os dois arcos da marca)
   -------------------------------------------------------------------------- */

.arcs {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
}

/* campo de tinta ocean: canvas WebGL atrás dos arcos, no mesmo plano fixo.
   Vazio (transparente) até o js/ink.js assumir; herda o dim da camada .arcs */
.ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* quadrado 150vmax centrado: maior que a diagonal de qualquer viewport,
   então a rotação composited nunca expõe a borda de recorte do svg */
.arcs__rotor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  margin-left: -75vmax;
  margin-top: -75vmax;
  will-change: transform;
  animation: spin-slow 240s linear infinite;
}
body[data-world="light"] .arcs__rotor { animation-play-state: paused; }

.arcs__orbit { position: absolute; inset: 0; will-change: transform; }

.arcs__svg { width: 100%; height: 100%; display: block; }

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.arc {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.arc--a { stroke: var(--color-secondary); opacity: 0.7; }
.arc--b { stroke: var(--color-dark-border); opacity: 0.8; }

.arc-drift { transform-box: fill-box; transform-origin: center; }

/* --------------------------------------------------------------------------
   Topbar (vive sobre o hero, rola junto com a página)
   -------------------------------------------------------------------------- */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: clamp(1rem, 3vw, 2rem) max(var(--gutter), env(safe-area-inset-right)) clamp(1rem, 3vw, 2rem) max(var(--gutter), env(safe-area-inset-left));
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-dark-text);
}
.wordmark { height: 19px; width: auto; display: block; }

.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-xs);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-state) var(--ease-out-quart);
}
.topbar__link:hover { color: var(--color-dark-text); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   Capítulo 1 · Hero
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(6rem, 16vh, 9rem) var(--space-3xl);
}

/* landscape de celular: tela baixa não comporta o display gigante */
@media (max-height: 480px) {
  .hero { padding-block: 4.5rem var(--space-2xl); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: 16ch;
}

.hero__lead {
  margin-top: var(--space-xl);
  font-size: var(--text-lead);
  color: var(--color-dark-muted);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Capítulo 2 · Círculos que não fecham
   -------------------------------------------------------------------------- */

.broken { padding-block: var(--space-chapter); }

.broken__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 20ch;
}

.orphans {
  list-style: none;
  margin: var(--space-3xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.orphan {
  position: relative;
  width: min(100%, 250px);
  justify-self: center;
  /* start + line-height 0: a caixa do item é exatamente o quadrado do svg,
     então o label (inset: 0) centraliza no círculo, não na linha do grid */
  align-self: start;
  line-height: 0;
}
.orphan:nth-child(odd) { justify-self: start; }
.orphan:nth-child(even) { justify-self: end; }

.orphan__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* a rotação vive num grupo interno: o bbox do svg não muda, nada vaza */
.orphan__rot {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin-slow 90s linear infinite;
  animation-play-state: paused;
}
.orphan--2 .orphan__rot { animation-duration: 70s; animation-direction: reverse; }
.orphan--3 .orphan__rot { animation-duration: 110s; }
.orphan--4 .orphan__rot { animation-duration: 80s; animation-direction: reverse; }
.orphan.is-live .orphan__rot { animation-play-state: running; }

/* traço principal: tinta que desfia nas pontas (fray vive no dasharray).
   non-scaling-stroke vem como atributo do path em <defs> */
.orphan__arc {
  fill: none;
  stroke: var(--color-dark-muted);
  stroke-width: 1.5;
  opacity: 0.55;
}

/* eco: a segunda passada da caneta, mais fraca e desalinhada */
.orphan__echo {
  fill: none;
  stroke: var(--color-dark-muted);
  stroke-width: 1;
  opacity: 0.22;
}

.orphan__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18%;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--color-dark-muted);
}

.broken__posture {
  margin-top: var(--space-3xl);
  font-size: var(--text-lead);
  max-width: 50ch;
}

/* bancada: esteira de ferramentas (CSS puro, duas trilhas idênticas).
   A trilha anda o próprio comprimento + um gap e recomeça — loop sem emenda.
   Hover pausa para leitura. */
.tools {
  --tools-gap: var(--space-2xl);
  margin-top: var(--space-3xl);
  display: flex;
  gap: var(--tools-gap);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.tools__track {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: var(--tools-gap);
  animation: tools-scroll 55s linear infinite;
}

.tools:hover .tools__track { animation-play-state: paused; }

@keyframes tools-scroll {
  to { transform: translateX(calc(-100% - var(--tools-gap))); }
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-dark-muted);
}

/* logo como máscara: o arquivo dá a forma, currentColor dá a tinta */
.tool__mark {
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--logo) no-repeat center / contain;
  mask: var(--logo) no-repeat center / contain;
}

.tool--claude .tool__mark { --logo: url("../assets/logos/claude.svg"); }
.tool--codex .tool__mark { --logo: url("../assets/logos/openai.svg"); }
.tool--gemini .tool__mark { --logo: url("../assets/logos/googlegemini.svg"); }
.tool--openclaw .tool__mark { --logo: url("../assets/logos/openclaw.svg"); }
.tool--firecrawl .tool__mark { --logo: url("../assets/logos/firecrawl.svg"); }
.tool--convex .tool__mark { --logo: url("../assets/logos/convex.svg"); }
.tool--supabase .tool__mark { --logo: url("../assets/logos/supabase.svg"); }
.tool--github .tool__mark { --logo: url("../assets/logos/github.svg"); }
.tool--microsoft .tool__mark { --logo: url("../assets/logos/microsoft.svg"); }
.tool--slack .tool__mark { --logo: url("../assets/logos/slack.svg"); }
.tool--teams .tool__mark { --logo: url("../assets/logos/microsoft-teams.svg"); }
.tool--whatsapp .tool__mark { --logo: url("../assets/logos/whatsapp.svg"); }
.tool--telegram .tool__mark { --logo: url("../assets/logos/telegram.svg"); }
.tool--discord .tool__mark { --logo: url("../assets/logos/discord.svg"); }
.tool--facebook .tool__mark { --logo: url("../assets/logos/facebook.svg"); }

/* com movimento reduzido a esteira vira grade estática; a cópia some */
@media (prefers-reduced-motion: reduce) {
  .tools {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tools__track {
    animation: none;
    min-width: 0;
    flex-shrink: 1;
    flex-wrap: wrap;
    row-gap: var(--space-lg);
  }
  .tools__track[aria-hidden="true"] { display: none; }
}

@media (min-width: 640px) {
  .orphans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orphan, .orphan:nth-child(odd), .orphan:nth-child(even) { justify-self: center; }
  .orphan--2 { margin-top: var(--space-3xl); }
  .orphan--4 { margin-top: var(--space-2xl); }
}

/* campo de tentativas falhas: composição sobreposta com um círculo dominante,
   fluxo diagonal título (esq) → campo → postura (dir). Sobreposições são
   intencionais: ordem do DOM resolve o empilhamento. */
@media (min-width: 1024px) {
  .orphans { grid-template-columns: repeat(12, 1fr); gap: 0; }
  .orphan--1 { grid-row: 1; grid-column: 1 / 5; width: min(100%, 320px); margin-top: 3rem; justify-self: start; }
  .orphan--2 { grid-row: 1; grid-column: 4 / 6; width: 170px; margin-top: 0; justify-self: start; }
  .orphan--3 { grid-row: 1; grid-column: 6 / 10; width: 260px; margin-top: 7.5rem; justify-self: end; }
  .orphan--4 { grid-row: 1; grid-column: 9 / 12; width: 190px; margin-top: 0.5rem; justify-self: start; }
  .broken__posture { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Transição · amanhecer circular (enhancement: só com JS + movimento)
   -------------------------------------------------------------------------- */

/* cenário de transição: só existe quando o JS de movimento assume */
.dawn { display: none; height: 200vh; position: relative; }
body.is-animated .dawn { display: block; }

.dawn__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.dawn__disc {
  width: 165vmax;
  height: 165vmax;
  border-radius: 50%;
  /* o disco revela a manhã: mesmo tom do topo do mundo claro, sem emenda */
  background: var(--color-canvas-morning);
  /* will-change é aplicado pelo JS só enquanto o scrub do dawn está ativo */
}

/* --------------------------------------------------------------------------
   Mundo claro (capítulos 3-5)
   -------------------------------------------------------------------------- */

/* O mundo claro percorre o arco do dia: manhã (serviços) → meio-dia (método)
   → entardecer (fundadores) → noite (convite). A base é o meio-dia; cada
   capítulo de borda carrega seu gradiente para a transição ficar contínua. */
.world-light {
  position: relative;
  background: var(--color-canvas-noon);
  color: var(--color-ink);
}

.world-light h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.world-light ::selection { background: var(--color-primary); color: var(--color-surface); }

/* --- Capítulo 3 · Serviços ------------------------------------------------ */

.services {
  padding-block: var(--space-chapter) var(--space-3xl);
  /* manhã → meio-dia: a luz sobe enquanto o capítulo desce */
  background: linear-gradient(to bottom in oklab, var(--color-canvas-morning), var(--color-canvas-noon));
}

.services__grid { display: grid; gap: var(--space-2xl); }

.services__visual { width: min(60vw, 240px); margin-inline: auto; }

/* overflow visível: a poeira respira além do viewBox sem ser ceifada */
.services__ring { width: 100%; height: auto; display: block; overflow: visible; }

.services__track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* poeira de portal: tinta pulverizada em volta do trilho. As camadas giram
   em sentidos opostos (parallax); o transform-box view-box fixa o eixo no
   centro do desenho mesmo com a nuvem assimétrica. */
.portal__dust circle { fill: var(--color-secondary); }
.portal__dust--b circle { fill: var(--color-primary); }
.portal__dust {
  transform-box: view-box;
  transform-origin: 210px 210px;
}
.portal__dust--a { animation: spin-slow 150s linear infinite; }
.portal__dust--b { animation: spin-slow 220s linear infinite reverse; }

/* varredura: só aparece quando a página está animada — estática, um arco
   solto sobre o trilho leria como erro de desenho */
.portal__sweep-rot {
  transform-box: view-box;
  transform-origin: 210px 210px;
  animation: spin-slow 18s linear infinite;
}
.portal__sweep {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--dur-entrance) var(--ease-out-quart);
}
body.is-animated .portal__sweep { opacity: 0.4; }

.services__anchor {
  fill: var(--color-secondary);
  opacity: 0.5;
}

.seg {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.services__content h2 { max-width: 18ch; }

.services__lead {
  margin-top: var(--space-lg);
  font-size: var(--text-lead);
  color: var(--color-muted);
  max-width: 46ch;
}

.service { margin-top: var(--space-3xl); max-width: var(--measure); }

.service h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.35;
}

.service h3 + p { margin-top: var(--space-sm); }

.service__receive {
  margin-top: var(--space-md);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-muted);
}

.services__close {
  margin-top: var(--space-3xl);
  font-size: var(--text-lead);
  font-weight: 600;
  color: var(--color-primary);
  max-width: 40ch;
}

@media (min-width: 1024px) {
  .services__grid {
    /* coluna do portal menor que a antiga (era 400px): o anel acompanha a
       escala dos textos em vez de dominar a dobra */
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
  }
  .services__visual {
    width: 100%;
    margin: 0;
    position: sticky;
    top: clamp(6rem, 22vh, 13rem);
  }
}

/* --- Capítulo 4 · Método --------------------------------------------------- */

.method { padding-block: var(--space-chapter); }

.method__title { max-width: 18ch; }

.steps {
  list-style: none;
  margin: var(--space-3xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xl);
}

.step {
  display: grid;
  grid-template-columns: clamp(84px, 22vw, 110px) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.step__visual { position: relative; }

.step__svg { width: 100%; height: auto; display: block; }

.step__track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.step__ticks {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 6;
}

/* miolo que tinge quando o ciclo fecha (JS anima; sem JS fica vazio) */
.step__fill {
  fill: var(--color-primary);
  opacity: 0;
}

/* cometa: a cabeça luminosa que varre o arco enquanto ele se desenha */
.step__comet-rot { transform-box: fill-box; transform-origin: center; }
.step__comet {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 5.5;
  stroke-linecap: round;
  opacity: 0;
}

.step__draw {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.step__dot {
  fill: var(--color-success);
  transform-box: fill-box;
  transform-origin: center;
}

/* pulso de fecho: anel que se expande e dissolve quando o ciclo completa */
.step__pulse {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.step__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-primary);
}

.step__body { max-width: 52ch; }
.step__body h3 { font-size: var(--text-h3); font-weight: 600; }
.step__body h3 + p { margin-top: var(--space-xs); }

.method__coda {
  margin-top: var(--space-3xl);
  font-size: var(--text-lead);
  color: var(--color-muted);
  max-width: 38ch;
}

/* Teatro pinado (aplicado por JS em telas largas com movimento) */
.method--theater .method__stage {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl);
}
.method--theater { padding-block: 0; }
.method--theater .method__title { text-align: center; margin-inline: auto; }
.method--theater .steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
  row-gap: 0;
  align-items: start;
  margin-top: var(--space-2xl);
}
.method--theater .step { display: contents; }
.method--theater .step__visual {
  grid-row: 1;
  width: clamp(96px, 11vw, 140px);
  justify-self: center;
}
.method--theater .step__body {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
  max-width: 46ch;
  margin-top: var(--space-2xl);
}
.method--theater .method__coda {
  text-align: center;
  margin-inline: auto;
  margin-top: var(--space-2xl);
}

/* --- Capítulo 5 · Fundadores ----------------------------------------------- */

.founders {
  padding-block: var(--space-chapter);
  /* meio-dia → entardecer: a luz cede antes da noite do convite */
  background: linear-gradient(to bottom in oklab, var(--color-canvas-noon), var(--color-canvas-dusk));
}

.founders__inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.mark-assembly { margin: 0; width: min(70vw, 320px); margin-inline: auto; }

.mark-assembly__svg { width: 100%; height: auto; display: block; overflow: visible; }

.mark-glyph { fill: var(--color-primary); }
.mark-glyph path { transform-box: view-box; }
.mark-glyph { transform-box: fill-box; transform-origin: center; }

.mark-assembly__names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-md);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-muted);
}
.mark-assembly__names span { justify-self: center; }

.founders__wordmark {
  display: block;
  width: 132px;
  height: auto;
  margin: var(--space-xl) auto 0;
}

.founders__text h2 { max-width: 16ch; }
.founders__text p { margin-top: var(--space-lg); max-width: 52ch; }

@media (min-width: 900px) {
  .founders__inner {
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
  }
  .mark-assembly { width: 100%; margin: 0; }
}

/* --------------------------------------------------------------------------
   Capítulo 6 · O círculo fecha
   -------------------------------------------------------------------------- */

.invite {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: var(--space-chapter);
  overflow: hidden;
}

.invite__circle {
  position: absolute;
  width: clamp(330px, 92vmin, 880px);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -51%);
  pointer-events: none;
}

/* halo de poeira: a matéria do portal. Camadas em contra-rotação, tons
   distintos — a clara é a luz perto do anel, a ocean é a profundidade */
.invite__dust--a circle { fill: var(--color-dark-muted); }
.invite__dust--b circle { fill: var(--color-secondary); }
.invite__dust {
  transform-box: view-box;
  transform-origin: 400px 400px;
}
.invite__dust--a { animation: spin-slow 260s linear infinite; }
.invite__dust--b { animation: spin-slow 340s linear infinite reverse; }

.invite__base {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

.invite__gold {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.invite__inner { text-align: center; position: relative; }

.invite h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.invite__pitch {
  margin: var(--space-lg) auto 0;
  font-size: var(--text-lead);
  color: var(--color-dark-muted);
  max-width: 44ch;
}

.invite__action {
  margin-top: var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* espaçador-espelho do aro (44px) à direita do botão: equilibra o aro à
   esquerda, então o botão fica no centro real do círculo (corrige o "eixo
   torto" que o aro sozinho criava no desktop) */
.invite__action::after {
  content: "";
  width: 44px;
  flex: none;
}

/* em telas estreitas o anel sobe para cima do botão: fecho centrado, sem eixo torto */
@media (max-width: 639px) {
  .invite__action { flex-direction: column; gap: var(--space-lg); }
  .invite__action::after { display: none; }
}

.cta-ring { width: 44px; height: 44px; flex: none; }
.cta-ring svg { width: 100%; height: 100%; display: block; }
.cta-ring__circle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 1rem 2.25rem;
  background: var(--color-accent);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-state) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}
.btn-cta:hover { background: var(--color-accent-dark); }
.btn-cta:active { transform: scale(0.98); }
.btn-cta:focus-visible { outline: 2px solid var(--color-dark-text); outline-offset: 4px; }

.invite__micro {
  margin-top: var(--space-lg);
  font-size: var(--text-small);
  color: var(--color-dark-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--color-dark-border);
  padding-block: var(--space-2xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer__proof {
  color: var(--color-dark-muted);
  max-width: 58ch;
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  font-size: var(--text-small);
  color: var(--color-dark-muted);
}
.footer__meta a {
  color: var(--color-dark-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__meta span { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 640px) {
  .footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* --------------------------------------------------------------------------
   Anel de progresso (bússola → âncora de conversão; só existe com JS)
   -------------------------------------------------------------------------- */

.ring {
  display: none;
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: var(--z-nav);
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

body.is-animated .ring { display: flex; }

.ring svg {
  width: 48px;
  height: 48px;
  display: block;
  border-radius: 50%;
  background: var(--color-dark-canvas);
  transition: background-color var(--dur-state) var(--ease-out-quart);
}
body[data-world="light"] .ring svg { background: var(--color-canvas); }

.ring__track {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--dur-state) var(--ease-out-quart);
}

.ring__fill {
  fill: none;
  stroke: var(--color-dark-muted);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--dur-state) var(--ease-out-quart);
}

body[data-world="light"] .ring__fill { stroke: var(--color-primary); }

.ring--gold .ring__fill { stroke: var(--color-accent); }

.ring__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-dark-muted);
}

.ring--docked { opacity: 0; pointer-events: none; }

/* toque: o anel flutuante cobriria o conteúdo full-width (não há margem como
   no desktop). É um delight de ponteiro fino; no toque ele some e o cta-ring
   do convite aparece sozinho (ver guard em js/main.js). */
@media (pointer: coarse) {
  /* especificidade casada com `body.is-animated .ring` (que o liga) + vindo
     depois no source, então some de verdade no toque */
  body.is-animated .ring { display: none; }
}

/* --------------------------------------------------------------------------
   Movimento reduzido: página estática, círculos completos, sem teatro
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .arcs__rotor,
  .orphan__rot { animation: none !important; }
  .dawn { display: none; }
  .ring { display: none; }
  .ink { display: none; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}