/* =============================================================================
   STYLES — layout + componentes
   Importa os tokens. Toda cor/medida vem de tokens.css.
   ============================================================================= */

@import url("./tokens.css");

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Brilho ambiente em camadas (profundidade cósmica) numa camada fixa PRÓPRIA:
   compositada uma vez, sem repintar a cada scroll (mais barato que background-attachment: fixed). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(58% 48% at 12% -6%, rgba(61, 217, 196, 0.1), transparent 60%),
    radial-gradient(54% 44% at 100% 0%, rgba(108, 92, 231, 0.12), transparent 55%),
    radial-gradient(60% 50% at 50% 120%, rgba(86, 214, 230, 0.06), transparent 60%);
}

/* Grão de filme: textura fina que mata banding e dá "pele" premium ao escuro.
   data: URI (sem requisição) — coberto por img-src 'self' data: na CSP. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  /* opacidade simples (sem mix-blend-mode) p/ não re-mesclar sobre o canvas a cada frame */
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
}

/* ---------- Acessibilidade: foco visível ---------- */
:focus-visible {
  outline: 2px solid var(--accent-a);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -120px;
  z-index: 100;
  background: var(--panel-2);
  color: var(--text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
  top: var(--space-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Utilitários de layout ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-9);
  position: relative;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section__head {
  margin-bottom: var(--space-7);
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-a);
  margin: 0 0 var(--space-3);
}

.section__title {
  font-size: var(--fs-h2);
}

.section__lead {
  color: var(--muted);
  font-size: var(--fs-lead);
  margin-top: var(--space-3);
}

/* ---------- Chips / mono ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.35em 0.7em;
  border-radius: var(--radius-pill);
}

/* =============================================================================
   NAV
   ============================================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
/* ganha "corpo" ao rolar (gerido por JS: .is-scrolled) */
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 12px 30px -22px rgba(0, 0, 0, 0.8);
}
/* o tronco da marca atravessa a nav: hairline-eixo abaixo do brand */
.nav__brand .mark {
  filter: drop-shadow(0 0 6px rgba(61, 217, 196, 0.35));
}
.nav__links a.is-current {
  color: var(--text);
}
.nav__links a.is-current::after {
  transform: scaleX(1);
  opacity: 0.75;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.nav__brand .mark {
  width: 22px;
  height: 22px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

/* sublinhado coeso: cresce do centro via transform (GPU) */
.nav__links a::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--bridge);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__links a:hover {
  color: var(--text);
}
.nav__links a:hover::after {
  transform: scaleX(1);
}

.nav__toggle {
  display: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav__toggle svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 820px) {
  .nav__toggle {
    display: inline-flex;
  }
  .nav__links {
    position: absolute;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: var(--space-3);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    /* visibility hidden tira os links da ordem de tabulação e da árvore de
       acessibilidade quando o menu está fechado (a11y); atrasa até o fim do fade. */
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
      visibility 0s linear var(--dur-fast);
  }
  .nav__links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
      visibility 0s;
  }
  .nav__links a {
    padding: var(--space-3);
    font-size: 0.95rem;
  }
}

/* =============================================================================
   HERO
   ============================================================================= */
.hero {
  padding-top: calc(var(--nav-h) + var(--space-9));
  padding-bottom: var(--space-9);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
/* scrim que funde o fundo animado do hero na cor base das seções abaixo */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* Canvas do fundo animado (WebGL ou Canvas 2D). Cobre o gradiente estático
   quando ativo; sem ele (reduced-motion/off), fica só o .hero__bg do CSS. */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hero__canvas.is-on {
  opacity: 1;
}

/* Conteúdo do hero centralizado */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Fundo ambiente: aurora suave (gradiente --bridge) + traço fino da "ponte" */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 36% at 32% 18%, rgba(61, 217, 196, 0.16), transparent 70%),
    radial-gradient(42% 40% at 70% 22%, rgba(108, 92, 231, 0.18), transparent 72%);
  filter: saturate(1.05);
}
.hero__bg::after {
  /* traço fino da ponte, bem discreto, atravessando o hero */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 64%;
  height: 1px;
  background: var(--bridge);
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.hero__eyebrow {
  margin-bottom: var(--space-5);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--aurora);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 24px rgba(108, 92, 231, 0.25));
  animation: hero-shimmer 14s var(--ease) infinite alternate;
}
@keyframes hero-shimmer {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.hero__tagline {
  font-size: var(--fs-lead);
  color: var(--text);
  max-width: 56ch;
  margin-top: var(--space-5);
  text-shadow: 0 1px 20px rgba(11, 13, 20, 0.6);
}

.hero__subtitle {
  color: var(--muted);
  max-width: 60ch;
  margin-top: var(--space-4);
  text-shadow: 0 1px 16px rgba(11, 13, 20, 0.5);
}

.hero__proofs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.hero__ctas .btn {
  font-size: 0.9rem;
  padding: 0.85em 1.4em;
}

/* Entrada orquestrada: fade + slide-up. Estado inicial; .is-in revela. */
.hero__rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  will-change: opacity, transform;
}
.hero__rise.is-in {
  opacity: 1;
  transform: none;
}

/* =============================================================================
   PRODUTOS — a parte mais importante
   ============================================================================= */

/* Faixa: contém a "ponte" luminosa + a fileira de logos */
.strip {
  position: relative;
  margin-top: var(--space-5);
}

.strip__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.strip__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.strip__arrow:hover {
  background: var(--panel-2);
  border-color: var(--accent-a);
}
.strip__arrow:active {
  transform: scale(0.94);
}
.strip__arrow svg {
  width: 18px;
  height: 18px;
}
.strip__arrow--next svg {
  transform: rotate(180deg);
}

/* Trilho da faixa */
.strip__track {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-block: var(--space-7) var(--space-5);
}

/* A PONTE: hairline com gradiente atravessando a faixa */
.bridge {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--line);
  overflow: visible;
}

/* Segmento aceso da ponte — posicionado via JS (--seg-x / --seg-w) */
.bridge__lit {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  width: var(--seg-w, 0px); /* constante entre logos (mesmo tamanho) — não anima */
  /* posição via transform (GPU): só translateX anima ao trocar de produto */
  transform: translate(var(--seg-x, 0px), -50%);
  background: var(--bridge);
  border-radius: 2px;
  box-shadow: 0 0 16px 1px rgba(108, 92, 231, 0.55);
  transition: transform var(--dur) var(--ease);
}

/* Fileira de logos */
.logos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.logo-btn {
  --size: 96px;
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  opacity: 0.5;
  transform: scale(0.86);
  transition: transform var(--dur-panel) var(--ease), opacity var(--dur-panel) var(--ease),
    box-shadow var(--dur-panel) var(--ease), border-color var(--dur-panel) var(--ease),
    background var(--dur-fast) var(--ease);
}

/* Slot consistente: a logo (SVG ou PNG) ocupa uma área fixa, sem distorcer.
   Cantos arredondados para os ícones de app (PNG quadrado) lerem como tile. */
.logo-btn img,
.logo-btn svg {
  width: 74%;
  height: 74%;
  object-fit: contain;
  border-radius: 22%;
  pointer-events: none;
}

.logo-btn:hover {
  opacity: 0.85;
}

.logo-btn.is-active {
  opacity: 1;
  transform: scale(1.06);
  border-color: transparent;
  background: var(--panel-2);
  box-shadow: var(--glow-b);
}

.logo-btn__name {
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.logo-btn.is-active .logo-btn__name {
  opacity: 1;
  color: var(--text);
}

/* Dots de posição */
.dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}
.dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--muted-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dots button.is-active {
  background: var(--accent-a);
  transform: scale(1.3);
}

/* Painel de detalhe */
.detail {
  margin-top: var(--space-7);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

/* faixa de gradiente no topo do painel */
.detail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--bridge);
  opacity: 0.85;
}

.detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.detail__name {
  font-size: var(--fs-h3);
}

.detail__category {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}

.detail__desc {
  color: var(--muted);
  max-width: 64ch;
  margin-bottom: var(--space-5);
}

.detail__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: 0;
  list-style: none;
}

.detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* Selo de status */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px 0 currentColor;
}
.status--available {
  color: var(--ok);
}
.status--ready {
  color: var(--ready);
}
.status--wip {
  color: var(--wip);
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.7em 1.1em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.btn--primary {
  color: var(--bg);
  background: var(--bridge);
  font-weight: 600;
}
.btn--primary:hover {
  box-shadow: var(--glow-a);
  transform: translateY(-1px);
}
.btn--ghost {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel-2);
}
.btn--ghost:hover {
  border-color: var(--accent-a);
  transform: translateY(-1px);
}
.btn--accent {
  color: var(--accent-a);
  border-color: color-mix(in srgb, var(--accent-a) 55%, transparent);
  background: color-mix(in srgb, var(--accent-a) 10%, transparent);
}
.btn--accent:hover {
  color: var(--bg);
  background: var(--accent-a);
  transform: translateY(-1px);
}
.btn--lg {
  font-size: 0.95rem;
  padding: 0.9em 1.5em;
}

/* Bloco de acesso: painel dentro do painel, o ponto focal do detalhe. */
.access {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  position: relative;
}
.access::before {
  /* realce em accent na borda esquerda */
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 3px;
  border-radius: 3px;
  background: var(--accent-a);
}
.access--available {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--bg-2));
}
.access--available::before {
  background: var(--ok);
}
.access--ready {
  border-color: color-mix(in srgb, var(--ready) 35%, var(--line));
  background: color-mix(in srgb, var(--ready) 7%, var(--bg-2));
}
.access--ready::before {
  background: var(--ready);
}
.access--wip {
  border-color: var(--line);
  background: var(--bg-2);
}
.access--wip::before {
  background: var(--wip);
}
.access__kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.access--available .access__kicker {
  color: var(--ok);
}
.access--ready .access__kicker {
  color: var(--ready);
}
/* CTA compacto: continua claro e clicável, mas sem dominar o card. */
.access__cta {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  gap: var(--space-2);
}
.access__cta svg {
  width: 15px;
  height: 15px;
}
.access__note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-2);
  margin: 0;
}

.detail__soon {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.detail__note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-2);
}

/* Animação de troca do painel (gerida por classes via JS) */
.detail.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.detail.is-entering {
  opacity: 0;
  transform: translateY(16px);
}
.detail.is-entered {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-panel) var(--ease), transform var(--dur-panel) var(--ease);
}

/* =============================================================================
   ESTRUTURA
   ============================================================================= */
/* Flex centralizado: a última linha (cards órfãos) fica centralizada,
   sem vão à direita. Robusto em 3, 2 e 1 coluna. */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.cards .card {
  flex: 1 1 300px;
  max-width: 360px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent-a) 30%, var(--line));
  box-shadow: var(--shadow-soft);
}

.card__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-3);
}

.card__body {
  color: var(--muted);
}

/* =============================================================================
   FUNDADORES
   ============================================================================= */
.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.founder {
  display: flex;
  gap: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.founder:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent-a) 30%, var(--line));
  box-shadow: var(--shadow-soft);
}

.founder__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent-a);
}
.founder__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__name {
  font-size: 1.15rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.founder__role {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-a);
  margin-top: var(--space-1);
}

.founder__bio {
  color: var(--muted);
  margin-top: var(--space-3);
  font-size: 0.95rem;
}

.founder__links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.founder__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.6em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.founder__links a:hover {
  color: var(--text);
  border-color: var(--accent-a);
}
.founder__links svg {
  width: 14px;
  height: 14px;
}

/* =============================================================================
   CONTATO
   ============================================================================= */
.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  /* cada card tem a altura do próprio conteúdo (compacto, sem esticar) */
  align-items: start;
}

.track {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* permite escalar o e-mail pela largura do PRÓPRIO card (não do viewport) */
  container-type: inline-size;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.track:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent-a) 30%, var(--line));
  box-shadow: var(--shadow-soft);
}

.track__label {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
}

.track__desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
}

/* Bloco de acesso compacto (sem empurrar para a base). */
.track__access {
  margin-top: var(--space-2);
}

.track__emailrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.track__email {
  font-family: var(--font-mono);
  /* UMA linha sempre; a fonte escala com a largura do card (container query)
     para caber o maior e-mail (…investidores@gmail.com) sem quebrar. */
  white-space: nowrap;
  font-size: clamp(0.56rem, 3.7cqi, 0.72rem);
  color: var(--accent-a);
  line-height: 1.4;
}
.track__email:hover {
  text-decoration: underline;
}
.track__email.is-disabled {
  color: var(--muted-2);
  opacity: 0.55;
  pointer-events: none;
  text-decoration: none;
}

/* Seletor de app — bolha/dropdown (somente card de Suporte) */
.support__select {
  position: relative;
  margin-bottom: var(--space-3);
}
.support__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 220px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.5em 0.9em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.support__trigger:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-a) 45%, var(--line));
}
.support__trigger.is-chosen {
  color: var(--text);
  border-color: var(--accent-a);
}
.support__caret {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.support__trigger[aria-expanded="true"] .support__caret {
  transform: rotate(180deg);
}

.support__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-width: 280px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: none;
  transform-origin: top;
  animation: support-pop var(--dur-fast) var(--ease);
}
@keyframes support-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.support__menu[hidden] {
  display: none;
}
.support__option {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.5em 0.7em;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.support__option.is-active {
  background: var(--panel);
  color: var(--text);
}
.support__option[aria-selected="true"] {
  color: var(--accent-a);
}
.support__option[aria-selected="true"]::after {
  content: " ✓";
}

/* Botão "Copiar e-mail" — secundário, pequeno */
.track__copy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.7em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.track__copy:hover {
  border-color: var(--accent-a);
}
.track__copy.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.track__copy.is-copied {
  color: var(--ok);
  border-color: var(--ok);
}

/* ---------- Bloco "Fale com a gente" (2 colunas: escolhas | e-mail) ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.contact__choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.contact__q {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}
.contact__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* pílulas de intenção */
.pill {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.45em 0.95em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pill:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-a) 45%, var(--line));
}
.pill:active {
  transform: translateY(1px);
}
.pill[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent-a);
  border-color: var(--accent-a);
  font-weight: 600;
}

/* listbox de apps (logo + nome) */
.contact__apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact__app {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.contact__app:hover {
  border-color: color-mix(in srgb, var(--accent-a) 40%, var(--line));
  transform: translateY(-1px);
}
.contact__app img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 22%;
  flex: none;
}
.contact__app span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
}
.contact__app[aria-selected="true"] {
  border-color: var(--accent-a);
  background: color-mix(in srgb, var(--accent-a) 12%, var(--panel-2));
}

/* coluna do e-mail (direita) */
.contact__email {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding-left: var(--space-6);
  border-left: 1px solid var(--line);
}
.contact__addr {
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 3.5cqi, 1.05rem);
  color: var(--accent-a);
  white-space: nowrap;
}
.contact__addr:hover {
  text-decoration: underline;
}
.contact__addr.is-disabled {
  color: var(--muted-2);
  opacity: 0.55;
  pointer-events: none;
  text-decoration: none;
}
.contact__hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted-2);
  margin: 0;
}

@media (max-width: 640px) {
  .contact {
    grid-template-columns: 1fr;
  }
  .contact__email {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
  }
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.footer {
  position: relative;
  padding-block: var(--space-8) var(--space-6);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
/* Traço fino em gradiente no topo — eco da assinatura visual. */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--bridge);
  opacity: 0.85;
}

.footer__cols {
  display: grid;
  /* marca (mais larga) + Produtos + Contato */
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line);
}

.footer__brandcol {
  max-width: 30ch;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}
.footer__brand .mark {
  width: 22px;
  height: 22px;
}
.footer__tagline {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: var(--space-3);
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: var(--space-4);
  font-weight: 500;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__list a {
  color: var(--muted);
  font-size: 0.9rem;
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover {
  color: var(--text);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.footer__copy,
.footer__made {
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin: 0;
}

@media (max-width: 720px) {
  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brandcol {
    grid-column: 1 / -1;
  }
}
@media (max-width: 460px) {
  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }
  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
   PROFUNDIDADE & MICRO-INTERAÇÕES (camada premium)
   Superfícies de vidro que deixam o fundo cósmico vazar + luz de borda + brilho
   que segue o cursor (--mx/--my via JS) + tilt 3D (--rx/--ry via JS).
   ============================================================================= */

/* Superfícies em vidro com luz de topo (profundidade real, não plana) */
.detail,
.card,
.founder,
.track,
.contact {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--edge-light), var(--shadow-soft);
}

/* Cartões com tilt 3D + glare seguindo o cursor (JS adiciona a classe .tilt) */
.card,
.founder,
.track,
.tech__pillar {
  transform-style: preserve-3d;
}
.card.tilt,
.founder.tilt,
.track.tilt,
.tech__pillar.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.card.tilt:hover,
.founder.tilt:hover,
.track.tilt:hover,
.tech__pillar.tilt:hover {
  box-shadow: var(--edge-light), var(--shadow-float);
  border-color: var(--line-2);
}
/* glare: realce radial que acompanha o mouse */
.card::after,
.founder::after,
.track::after,
.tech__pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(86, 214, 230, 0.1),
    transparent 60%
  );
  transition: opacity var(--dur) var(--ease);
}
.card:hover::after,
.founder:hover::after,
.track:hover::after,
.tech__pillar:hover::after {
  opacity: 1;
}
/* o glare exige contexto de empilhamento nesses cartões */
.card,
.founder,
.track {
  position: relative;
}

/* CTAs do hero com brilho/sheen e suporte a magnetismo (transform via JS) */
.hero__ctas .btn {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease);
}
.btn--primary:hover::after {
  transform: translateX(120%);
}

/* Faixa de produtos: setas em vidro + logo ativa com glow do novo sistema */
.strip__arrow {
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--edge-light);
}
.logo-btn {
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.logo-btn.is-active {
  box-shadow: var(--edge-light), 0 0 0 1px rgba(86, 214, 230, 0.3),
    0 0 40px -6px rgba(108, 92, 231, 0.55);
}

/* =============================================================================
   O MOTOR (Tecnologia) — nova seção
   ============================================================================= */
.tech__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--space-5);
}
.tech__pillar {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  box-shadow: var(--edge-light), var(--shadow-soft);
}
/* eixo (tronco) na borda esquerda — assinatura da marca */
.tech__pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-5);
  bottom: var(--space-5);
  width: 3px;
  border-radius: 3px;
  background: var(--axis);
  opacity: 0.85;
}
.tech__k {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1;
  background: var(--axis);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.55;
}
.tech__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: var(--space-3) 0 var(--space-2);
}
.tech__body {
  color: var(--muted);
  font-size: 0.95rem;
}

/* =============================================================================
   NAV — CTA "Orçamento" (pílula destacada)
   ============================================================================= */
.nav__links a.nav__cta {
  color: var(--bg);
  background: var(--bridge);
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease);
}
.nav__links a.nav__cta::after {
  content: none; /* sem o sublinhado dos links de texto */
}
.nav__links a.nav__cta:hover,
.nav__links a.nav__cta.is-current {
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: var(--glow-a);
}
@media (max-width: 820px) {
  /* no menu mobile a pílula vira um link normal de largura total */
  .nav__links a.nav__cta {
    background: none;
    color: var(--accent-a);
    padding: var(--space-3);
  }
}

/* =============================================================================
   SEGURANÇA — painel de status (instrumento) + princípios
   ============================================================================= */
.sec {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 860px) {
  .sec {
    grid-template-columns: 1fr;
  }
}

.sec__panel {
  position: relative;
  overflow: hidden;
  font-family: var(--font-mono);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge-light), var(--shadow-soft);
}
.sec__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--bridge);
  opacity: 0.85;
}
.sec__panelhead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.sec__pdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-2);
  flex: none;
}
.sec__pdot:first-child {
  background: var(--ok);
  box-shadow: 0 0 10px -1px var(--ok);
  animation: sec-pulse 2.6s var(--ease) infinite;
}
@keyframes sec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  60% { box-shadow: 0 0 0 5px transparent; }
}
.sec__ptitle {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.sec__rows {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
}
.sec__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 65%, transparent);
}
.sec__row:last-child {
  border-bottom: 0;
}
.sec__check {
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--ok);
  box-shadow: 0 0 10px -2px var(--ok);
  flex: none;
}
.sec__check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--ok);
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
}
/* check "aparece" escalonado quando o painel entra na viewport */
.sec__panel.is-visible .sec__check {
  animation: sec-pop 380ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes sec-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.sec__rk {
  color: var(--text);
  font-size: 0.82rem;
}
.sec__rv {
  color: var(--accent-a);
  font-size: 0.76rem;
  text-align: right;
}
.sec__principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 520px) {
  .sec__principles {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   ORÇAMENTO — configurador
   ============================================================================= */
.quote {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge-light), var(--shadow-soft);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}
@media (max-width: 820px) {
  .quote {
    grid-template-columns: 1fr;
  }
}

.quote__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.quote__step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.quote__q {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 var(--space-3);
  padding: 0;
}
.quote__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* ORÇAMENTO — seletor de categoria (área) que revela as opções específicas */
.quote__areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 560px) {
  .quote__areas {
    grid-template-columns: 1fr;
  }
}
.quote__area {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.quote__area:hover {
  border-color: color-mix(in srgb, var(--accent-a) 45%, var(--line));
}
.quote__area:active {
  transform: translateY(1px);
}
.quote__area[aria-pressed="true"] {
  border-color: var(--accent-a);
  background: color-mix(in srgb, var(--accent-a) 12%, var(--panel-2));
}
.quote__area-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
.quote__area-desc {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-2);
}
/* reveal: as opções da categoria escolhida entram com fade + slide */
.quote__reveal {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quote__reveal.is-open {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .quote__reveal {
    transition: none;
    transform: none;
  }
}
.qchip {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.45em 0.95em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.qchip:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent-a) 45%, var(--line));
}
.qchip:active {
  transform: translateY(1px);
}
.qchip[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent-a);
  border-color: var(--accent-a);
  font-weight: 600;
}
.qchip--multi[aria-pressed="true"] {
  color: #fff;
  background: var(--accent-b);
  border-color: var(--accent-b);
}
.quote__notes {
  width: 100%;
  resize: vertical;
  min-height: 84px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.quote__notes::placeholder {
  color: var(--muted-2);
}

/* o "ticket" gerado ao vivo */
.quote__ticket {
  position: relative;
  overflow: hidden;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.quote__ticket::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--axis);
  opacity: 0.85;
}
.quote__tickethead {
  display: flex;
  align-items: center;
  gap: 6px;
}
.quote__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-2);
  flex: none;
}
.quote__dot:first-child {
  background: var(--accent-a);
}
.quote__ticketkicker {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.quote__lines {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.quote__line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 65%, transparent);
}
.quote__line:last-child {
  border-bottom: 0;
}
.quote__line dt {
  color: var(--muted-2);
  font-size: 0.72rem;
}
.quote__line dd {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  text-align: right;
  word-break: break-word;
}
.quote__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.quote__send {
  justify-content: center;
}
.quote__send svg {
  width: 16px;
  height: 16px;
}
.quote__send[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.quote__hint {
  font-size: 0.74rem;
  color: var(--muted-2);
  margin: 0;
}

/* =============================================================================
   SCROLL-REVEAL (animação de entrada)
   ============================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  /* inclui border/shadow para não anular o hover dos cards (.card/.track também são .reveal) */
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =============================================================================
   RESPONSIVO
   ============================================================================= */
@media (max-width: 560px) {
  .logo-btn {
    --size: 72px;
    border-radius: var(--radius);
  }
  .founder {
    flex-direction: column;
  }
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
   INTRO — "chuva de código" (estilo Matrix) que revela o site na última descida
   -----------------------------------------------------------------------------
   Overlay opaco já no HTML (pintado no 1º frame -> sem flash de conteúdo). O JS
   desenha o <canvas> e, ao fim, esvazia + some (.is-revealing) e sai (.is-done).
   Acima da nav (50) e do grão (9999). prefers-reduced-motion esconde tudo.
   ============================================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  overflow: hidden;
  opacity: 1;
  transition: opacity 900ms var(--ease);
  will-change: opacity;
}
.intro__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* vinheta suave p/ profundidade */
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 78% at 50% 32%, transparent 55%, rgba(0, 0, 0, 0.55));
}
.intro__skip {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  /* rgba direto (sem color-mix) p/ ter fundo garantido em browsers antigos */
  background: rgba(22, 26, 40, 0.62);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  /* invisível E fora do tab order até a animação começar (não foca botão oculto) */
  opacity: 0;
  visibility: hidden;
  animation: introSkipIn 600ms var(--ease) 800ms forwards;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.intro__skip:hover {
  color: var(--text);
  border-color: var(--line-2);
}
.intro__skip:focus-visible {
  outline: 2px solid var(--accent-c);
  outline-offset: 2px;
}
@keyframes introSkipIn {
  to {
    opacity: 1;
    visibility: visible;
  }
}
/* reveal: cortina some e libera o clique no site por baixo */
.intro.is-revealing {
  opacity: 0;
  pointer-events: none;
}
/* fim: fora do fluxo e da árvore de acessibilidade */
.intro.is-done {
  display: none;
}

/* =============================================================================
   prefers-reduced-motion: desliga slides/reveals, exibe instantâneo
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal,
  .hero__rise {
    opacity: 1;
    transform: none;
  }
  /* sem movimento, mas mantém o gradiente estático do hero (não é animação) */
  .hero__canvas {
    display: none;
  }
  /* sem intro animada: esconde a cortina já no CSS (não chega a piscar) */
  .intro {
    display: none;
  }
  .card.tilt,
  .founder.tilt,
  .track.tilt,
  .tech__pillar.tilt {
    transform: none;
  }
  .hero__title {
    animation: none;
  }
  .bridge__lit {
    box-shadow: none;
  }
}