/* =========================================================
   byflows — SaaS de atendimento WhatsApp com IA
   Dark emerald · liquid bg · premium polish · octopus mascot
   ========================================================= */
:root {
  /* Paleta da marca (#110) — as quatro cores da identidade entregue em set/2026.
     Espelha o bloco --lp-* de src/index.css: as páginas legais e a de planos são
     servidas pelo app e precisam parecer o mesmo site que byflows.com.br.

     O Deep Flow é #04261F, e não o #062E28 da ficha (#118): a ficha traz HEX e RGB
     divergentes, e a arte que o designer entregou usa o RGB. Medido nos PNGs. */
  --brand-deep: #04261F;      /* Deep Flow */
  --brand-emerald: #03895E;   /* Byflows Emerald */
  --brand-mint: #AFF5D5;      /* Flow Mint */
  --brand-cloud: #E9FAF2;     /* Cloud Mint */

  --bg-0: #031814;
  --bg-1: #04261F;
  --bg-2: #063B30;
  --bg-3: #08493B;
  --ink-0: #E9FAF2;
  --ink-1: #C3E4D6;
  --ink-2: #86AEA1;
  --ink-3: #557A6E;
  --accent: #AFF5D5;
  --accent-2: #7FE0B8;
  --accent-3: #E9FAF2;
  --accent-deep: #03895E;
  --accent-soft: rgba(175,245,213, 0.14);
  --rule: rgba(175,245,213, 0.10);
  --rule-strong: rgba(175,245,213, 0.22);
  --whatsapp: #25d366;
  --shadow-card: 0 30px 80px -30px rgba(0,0,0,0.7), 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 60px -12px rgba(175,245,213,0.32);

  /* Tipografia: SF Pro Display. Não é distribuível pela web — entra por nome e o
     sistema resolve em Apple; fora dele a queda é a Inter, equivalente métrica.
     A identidade nova é monotipográfica: saiu a Instrument Serif dos títulos. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; background: var(--bg-0); color: var(--ink-0); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--bg-0); }

/* ========== GLOBAL LIQUID BG ========== */
#liquid-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  filter: saturate(1.12) contrast(1.02);
}
.app { position: relative; z-index: 1; }

/* Sections that should "kill" liquid visually behind them */
.pause-liquid { position: relative; }
.pause-liquid::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3,21,15,0.18) 0%, rgba(3,21,15,0.38) 30%, rgba(3,21,15,0.40) 70%, rgba(3,21,15,0.18) 100%);
  z-index: -1;
  pointer-events: none;
}
/* Generic per-section subtle dim under content */
section:not(.pause-liquid)::before, footer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,21,15,0.30) 0%, rgba(3,21,15,0.56) 60%, rgba(3,21,15,0.30) 100%);
  z-index: -1;
  pointer-events: none;
}
section, footer, header.hero { position: relative; }
header.hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 70%, rgba(175,245,213, 0.18), transparent 36%),
    radial-gradient(ellipse at 72% 30%, rgba(127,224,184, 0.12), transparent 40%),
    conic-gradient(from 160deg at 54% 54%, transparent 0deg, rgba(175,245,213, 0.10) 64deg, transparent 132deg, rgba(3,137,94, 0.12) 214deg, transparent 310deg);
  filter: blur(38px) saturate(1.22);
  opacity: 0.86;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04);
  animation: heroLiquidDrift 16s ease-in-out infinite alternate;
}
@keyframes heroLiquidDrift {
  0% { transform: translate3d(-2%, 1%, 0) rotate(-3deg) scale(1.04); }
  50% { transform: translate3d(2%, -2%, 0) rotate(3deg) scale(1.08); }
  100% { transform: translate3d(0, 2%, 0) rotate(-1deg) scale(1.05); }
}

/* ========== Layout primitives ========== */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 8px var(--accent); }
  50% { box-shadow: 0 0 14px var(--accent), 0 0 22px rgba(175,245,213,0.6); }
}

/* ========== Nav ========== */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  padding: 18px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  transition: all .3s ease;
}
.nav.scrolled {
  padding: 12px 32px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(3,21,15,0.78);
  border-bottom: 1px solid var(--rule);
}
.nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.nav .brand b { font-weight: 700; }
.nav .brand b em { font-style: normal; color: var(--accent); }
.brand-glyph { display: inline-flex; align-items: center; }
.nav .brand-glyph img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(175,245,213,0.45)); }
.foot-brand .brand-glyph img { width: 36px; height: 36px; }

.nav ul { list-style: none; display: flex; gap: 24px; }
.nav ul a {
  font-size: 13px;
  color: var(--ink-1);
  opacity: 0.78;
  transition: opacity .2s, color .2s;
}
.nav ul a:hover { opacity: 1; color: var(--accent-2); }
.nav .cta-group { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1000px) { .nav ul { display: none; } }
@media (max-width: 560px) { .nav .cta-group .btn-ghost { display: none; } }
@media (max-width: 560px) {
  .container { padding: 0 24px; }
  .nav { padding: 14px 20px; gap: 12px; }
  .nav .brand { font-size: 23px; }
  .nav .brand-glyph img { width: 28px; height: 28px; }
}

/* Não havia nenhuma regra de foco: quem navega por teclado dependia do outline
   padrão do browser, que some nos controles customizados deste layout. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========== Menu de telas menores ==========
   Até 1000px a lista do nav é escondida (acima) e até 560px o "Entrar" também.
   Sem um botão de menu o header ficava sem nenhuma navegação. O drawer devolve
   as seções e o CTA sem mexer no layout do desktop. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  background: rgba(175,245,213, 0.05);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink-0);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.nav-toggle:hover { background: rgba(175,245,213, 0.12); border-color: var(--accent); }
.nav-toggle-bars { display: grid; gap: 5px; width: 18px; }
.nav-toggle-bars i {
  display: block; height: 1.5px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 49;
  padding: 88px 20px 24px;
  /* Opaco de propósito: o perf-lite desliga backdrop-filter, e com qualquer
     transparência o título do hero (60px) aparecia atrás do menu. */
  background: var(--bg-1);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 60px -20px rgba(0,0,0, 0.8);
  max-height: 100svh;
  overflow-y: auto;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer ul { list-style: none; display: grid; gap: 2px; }
.nav-drawer ul a {
  display: block;
  padding: 13px 14px;
  border-radius: 12px;
  color: var(--ink-0);
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
}
.nav-drawer ul a:hover { background: rgba(175,245,213, 0.05); border-color: var(--rule); }
.nav-drawer-cta { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.nav-drawer-cta .btn { width: 100%; justify-content: center; }
/* Acima de 560px o "Entrar" já está no header — não repetir dentro do menu. */
@media (min-width: 561px) { .nav-drawer-cta .btn-ghost { display: none; } }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
}
/* Telas estreitas: some o "Entrar" do header (regra acima) mas o CTA principal
   fica — era ele que desaparecia junto e deixava o topo sem nenhuma ação. */
@media (max-width: 560px) {
  .nav .cta-group { display: flex; }
  .nav .cta-group .btn-primary { padding: 10px 16px; font-size: 14px; }
  .nav .cta-group .btn-primary .arrow { display: none; }
}
@media (max-width: 380px) {
  .nav .cta-group { display: none; }
}

/* ========== Buttons ========== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: transform .15s ease, background .2s, border-color .2s, color .2s, box-shadow .2s;
  border: 1px solid transparent;
  white-space: nowrap;
  font-weight: 500;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  color: var(--bg-0);
  box-shadow: 0 6px 28px -8px rgba(175,245,213,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover { background: var(--accent-2); box-shadow: 0 10px 36px -8px rgba(175,245,213,0.8), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-ghost {
  border-color: var(--rule-strong);
  color: var(--ink-0);
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: rgba(175,245,213,0.45); background: rgba(255,255,255,0.06); color: var(--accent-2); }
.btn .arrow { font-size: 15px; line-height: 1; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn .play-ico {
  display: inline-block; width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: -2px;
}

/* ========== Ticker ========== */
.ticker {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  overflow: hidden;
  background: rgba(3,21,15,0.85);
  z-index: 1;
}
.ticker-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0 32px;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.ticker-track {
  display: flex;
  gap: 56px;
  padding-left: 32px;
  animation: ticker 38s linear infinite;
  white-space: nowrap;
}
.ticker-track span {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px;
  color: var(--ink-1);
  opacity: 0.6;
  letter-spacing: -0.01em;
}
.ticker-track span em { color: var(--accent); font-style: normal; opacity: 0.7; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ========== Section layout ========== */
.section { padding: 130px 0; }
@media (max-width: 720px) { .section { padding: 90px 0; } }
.section-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  margin-bottom: 64px;
  align-items: end;
}
@media (max-width: 880px) {
  .section-head { grid-template-columns: 1fr; gap: 28px; }
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.section-head h2 em { font-style: normal; color: var(--accent); font-weight: 700; }
.section-head .hed-aside {
  color: var(--ink-1);
  font-size: 16px;
  line-height: 1.62;
  max-width: 46ch;
  min-width: 0;
}
.section-head .eyebrow { margin-bottom: 20px; display: inline-flex; }

.premium-shell {
  min-height: 520px;
  border: 1px solid var(--rule-strong);
  border-radius: 22px;
  padding: 44px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 42px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(175,245,213,0.10), transparent 38%),
    linear-gradient(180deg, rgba(10,60,52,0.72), rgba(4, 38, 31,0.58));
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}
.premium-shell::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse at 24% 68%, rgba(175,245,213,0.18), transparent 36%),
    radial-gradient(ellipse at 74% 28%, rgba(127,224,184,0.12), transparent 40%);
  filter: blur(28px);
  opacity: 0.8;
  pointer-events: none;
}
.premium-copy,
.premium-machine { position: relative; z-index: 1; }
.diff-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.diff-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
.premium-copy p {
  color: var(--ink-1);
  font-size: 18px;
  line-height: 1.7;
  max-width: 46ch;
}
.operation-log {
  margin-top: 28px;
  border: 1px solid rgba(127,224,184,0.18);
  border-radius: 16px;
  background: rgba(3,21,15,0.34);
  overflow: hidden;
}
.log-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 3px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(175,245,213,0.08);
  position: relative;
}
.log-row:last-child { border-bottom: 0; }
.log-row::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(175,245,213,0.8);
}
.log-row span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.log-row strong {
  color: var(--ink-0);
  font-size: 13px;
  font-weight: 500;
}
.log-row em {
  grid-column: 2;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-style: normal;
}
.log-row.active {
  background: linear-gradient(90deg, rgba(175,245,213,0.10), transparent);
}
.premium-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.premium-points span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  border: 1px solid rgba(127,224,184,0.28);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(3,21,15,0.36);
}
.premium-machine {
  min-height: 420px;
  border: 1px solid rgba(127,224,184,0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(3,21,15,0.28), rgba(3,21,15,0.52)),
    radial-gradient(ellipse at 50% 50%, rgba(175,245,213,0.13), transparent 62%);
  overflow: hidden;
}
.premium-machine::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(127,224,184,0.08);
  border-radius: 14px;
  background-image:
    linear-gradient(rgba(127,224,184,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,224,184,0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 76%);
}
.machine-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 148px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.20), transparent 24%),
    linear-gradient(180deg, rgba(175,245,213,0.95), rgba(3,137,94,0.88));
  color: var(--bg-0);
  box-shadow: 0 0 0 14px rgba(175,245,213,0.06), 0 0 70px rgba(175,245,213,0.32);
  z-index: 3;
}
.machine-core img { width: 48px; height: 48px; object-fit: contain; filter: brightness(0.12); opacity: 0.78; }
.machine-core span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.machine-node {
  position: absolute;
  width: 178px;
  padding: 15px 16px;
  border: 1px solid rgba(127,224,184,0.26);
  border-radius: 13px;
  background: rgba(3,21,15,0.64);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 38px -22px rgba(0,0,0,0.9);
  z-index: 2;
}
.machine-node strong {
  display: block;
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
}
.machine-node span {
  display: block;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.node-a { left: 8%; top: 16%; }
.node-b { right: 8%; top: 16%; }
.node-c { right: 8%; bottom: 16%; }
.node-d { left: 8%; bottom: 16%; }
.machine-line {
  position: absolute;
  height: 1px;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(175,245,213,0.72), transparent);
  transform-origin: center;
  z-index: 1;
}
.machine-line::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulseLine 2.8s linear infinite;
}
.line-a { left: 25%; top: 35%; transform: rotate(25deg); }
.line-b { right: 25%; top: 35%; transform: rotate(-25deg); }
.line-c { right: 25%; bottom: 35%; transform: rotate(25deg); }
.line-d { left: 25%; bottom: 35%; transform: rotate(-25deg); }
@keyframes pulseLine { to { left: calc(100% - 5px); } }
@media (max-width: 980px) {
  .premium-shell {
    grid-template-columns: 1fr;
    padding: 30px;
  }
  .premium-machine { min-height: 390px; }
}
@media (max-width: 620px) {
  .premium-diff { padding-top: 96px; }
  .premium-shell {
    min-height: auto;
    padding: 22px;
    border-radius: 16px;
  }
  .premium-copy p { font-size: 16px; }
  .premium-machine { min-height: 520px; }
  .machine-core {
    width: 122px;
    height: 122px;
  }
  .machine-node {
    width: min(172px, 46%);
    padding: 12px;
  }
  .node-a { left: 5%; top: 8%; }
  .node-b { right: 5%; top: 8%; }
  .node-c { right: 5%; bottom: 8%; }
  .node-d { left: 5%; bottom: 8%; }
  .machine-line { width: 34%; }
}
/* ========== Pricing ========== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1020px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(10,60,52,0.78), rgba(4, 38, 31,0.7));
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.price-card:hover { border-color: var(--rule-strong); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.price-card.featured {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(175,245,213,0.10), transparent 60%),
    linear-gradient(180deg, rgba(10,60,52,0.92), rgba(4, 38, 31,0.85));
  box-shadow: 0 24px 60px -22px rgba(175,245,213,0.4);
}
.price-card .tag {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px; border-radius: 999px;
}
.price-card h3 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.price-card .plan-sub { color: var(--ink-2); font-size: 13px; margin-bottom: 24px; line-height: 1.5; }
.price-card .amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 20px; }
.price-card .amount .currency { color: var(--ink-2); font-size: 14px; }
.price-card .amount .num { font-family: var(--font-display); font-size: 52px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.price-card .amount .per { color: var(--ink-2); font-size: 12px; margin-left: 4px; }
.price-card .limits { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px; background: rgba(255,255,255,0.03); border-radius: 10px; margin-bottom: 20px; font-size: 12px; }
.price-card .limits .lim { display: flex; justify-content: space-between; color: var(--ink-1); }
.price-card .limits .lim strong { color: var(--ink-0); font-weight: 500; }
.price-card .feats { list-style: none; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.price-card .feats li {
  font-size: 13px; color: var(--ink-1);
  position: relative; padding-left: 22px;
  line-height: 1.5;
}
.price-card .feats li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent);
}
.price-card .feats li::after {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.price-card .btn { margin-top: auto; justify-content: center; }

/* ========== FAQ ========== */
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); padding: 26px 0; cursor: pointer; }
.faq-item .q {
  display: flex; align-items: start; justify-content: space-between; gap: 24px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.faq-item .plus {
  flex-shrink: 0; width: 28px; height: 28px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  color: var(--ink-1);
  transition: transform .3s, background .2s, color .2s, border-color .2s;
}
.faq-item.open .plus { transform: rotate(45deg); background: var(--accent); color: var(--bg-0); border-color: var(--accent); }
.faq-item .a {
  max-height: 0; overflow: hidden;
  color: var(--ink-1); font-size: 15px; line-height: 1.65;
  transition: max-height .4s, margin-top .3s, opacity .3s;
  opacity: 0;
  max-width: 76ch;
}
.faq-item.open .a { max-height: 400px; margin-top: 16px; opacity: 1; }

/* ========== Final CTA ========== */
.final-cta {
  padding: 140px 0 120px;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  position: relative;
}
.final-cta::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(175,245,213,0.22), transparent 55%),
    radial-gradient(ellipse at 20% 20%, rgba(3,137,94,0.16), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.cta-octo-disabled {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  color: rgba(175,245,213,0.04);
  z-index: 0;
  pointer-events: none;
  animation: octoFloat 12s ease-in-out infinite;
}
.cta-octo img { width: 100%; height: 100%; object-fit: contain; opacity: 0.5; filter: drop-shadow(0 0 60px rgba(175,245,213,0.3)); }
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 16px 0 24px;
  text-wrap: balance;
}
.final-cta h2 em { font-style: normal; color: var(--accent); font-weight: 700; }
.final-cta p { color: var(--ink-1); font-size: 17px; margin-bottom: 36px; max-width: 58ch; margin-left: auto; margin-right: auto; line-height: 1.55; }
.final-cta .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ========== Footer ========== */
footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2); font-size: 13px;
  background: rgba(3,21,15,0.92);
  backdrop-filter: blur(14px);
  position: relative;
}
footer .grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 860px) { footer .grid { grid-template-columns: 1fr 1fr; } }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--ink-0); margin-bottom: 14px; }
.foot-brand b { font-weight: 700; }
.foot-brand b em { font-style: normal; color: var(--accent); }
.foot-desc { max-width: 36ch; color: var(--ink-2); line-height: 1.55; font-size: 13px; }
footer h6 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1);
  margin-bottom: 16px;
}
footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer ul a { color: var(--ink-2); transition: color .2s; }
footer ul a:hover { color: var(--accent-2); }
footer .bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap; gap: 16px;
}
footer .bottom .domains { display: flex; gap: 12px; color: var(--ink-3); flex-wrap: wrap; }
footer .bottom .domains em { color: var(--accent); font-style: normal; }

/* Saída manual pro fundo animado — discreta de propósito: quem precisa vai
   procurar, e ela não deve competir com o conteúdo do rodapé. */
.perf-toggle {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  font: inherit;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.perf-toggle:hover { color: var(--ink-1); border-color: var(--accent); }
.perf-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ========== Reveal ========== */
/* ── Entrada por scroll ──────────────────────────────────────────────────────
   Era `translateY(28px)` em `.9s ease`. Três coisas erradas de uma vez: quase QUATRO
   vezes a duração mais longa do design system (`--motion-slow: 240ms`), o dobro do
   deslocamento, e a curva `ease` padrão — que o próprio src/index.css documenta como
   fraca e por isso o produto não usa.

   Muito tempo somado a muita distância faz o elemento DESLIZAR, que é a sensação de
   folha saindo da impressora. Pouco tempo, pouca distância e uma curva que chega rápido
   e desacelera fazem ele APARECER. É a diferença inteira. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* Cascata: os filhos entram em sequência em vez de a seção inteira chegar como um bloco.
   Sem isto, 24 elementos cobriam 12 seções — dois por seção, ou seja, a seção toda era
   UM movimento só. O atraso para no 8º filho de propósito: passou disso, quem rolou
   rápido fica esperando o conteúdo aparecer, e a cascata vira atraso. */
.reveal.cascata > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.cascata.in > * { opacity: 1; transform: none; }
.reveal.cascata.in > *:nth-child(2) { transition-delay: 55ms; }
.reveal.cascata.in > *:nth-child(3) { transition-delay: 110ms; }
.reveal.cascata.in > *:nth-child(4) { transition-delay: 165ms; }
.reveal.cascata.in > *:nth-child(5) { transition-delay: 220ms; }
.reveal.cascata.in > *:nth-child(6) { transition-delay: 275ms; }
.reveal.cascata.in > *:nth-child(n+7) { transition-delay: 300ms; }

/* ── Banda clara (respiro) ───────────────────────────────────────────────────
   O Cloud Mint é a quarta cor da marca e a ficha diz para que ela serve: "fundo claro
   para áreas de respiro". A LP inteira era uma banda escura só, e o Cloud Mint existia
   aqui apenas como cor de TEXTO (--ink-0). A alternância é o que dá ritmo à página —
   e ela cabe dentro de uma paleta monocromática, que é o que a marca pede.

   O escopo redefine os tokens em vez de reescrever cada regra: tudo que já usa
   `var(--ink-*)`, `var(--rule)` e `var(--accent)` inverte junto, de graça. Os valores
   são os do tema claro do app (src/index.css :root.light), que já estão conferidos em
   contraste — nada inventado aqui.

   O fundo é OPACO de propósito: o canvas líquido é `position: fixed` atrás da página, e
   uma banda translúcida deixaria o verde vazar por baixo do claro. */
/* `.section.section-clara` e não `.section-clara`: o véu genérico é
   `section:not(.pause-liquid)::before`, e o `:not()` conta a classe que carrega — dá
   (0,1,2), que vence uma classe sozinha. Medido em navegador: com um seletor só, o
   escopo aplicava (o texto virava escuro) e o fundo continuava escuro, ou seja, texto
   escuro sobre fundo escuro. */
.section.section-clara {
  background: var(--brand-cloud);
  color: var(--ink-0);

  --bg-0: #E9FAF2;
  --bg-1: #FFFFFF;
  --bg-2: #D6F0E4;
  --bg-3: #C2E9D6;
  --ink-0: #04261F;
  --ink-1: #0E3A32;
  --ink-2: #456B61;
  --ink-3: #4E7368;
  --accent: #037A54;
  --accent-2: #03875C;
  --accent-3: #04261F;
  --accent-deep: #03875C;
  --accent-soft: rgba(3, 137, 94, 0.10);
  --rule: rgba(4, 38, 31, 0.12);
  --rule-strong: rgba(4, 38, 31, 0.22);
  --shadow-card: 0 24px 60px -34px rgba(4, 38, 31, 0.28), 0 4px 12px -6px rgba(4, 38, 31, 0.10);
  --shadow-glow: 0 0 60px -12px rgba(3, 137, 94, 0.22);
}

/* O véu escuro que o `section::before` genérico joga por cima do canvas líquido não tem
   o que fazer numa banda opaca — e escureceria o claro. */
.section.section-clara::before { display: none; }

/* Os cinco pontos destas seções que pintam cor fixa em vez de token. */
.section-clara .sec-card,
.section-clara .price-card,
.section-clara .faq-item,
.section-clara .plan-explainer { background: var(--bg-1); }
.section-clara .price-card .limits { background: rgba(4, 38, 31, 0.04); }
.section-clara .price-card.featured { background: linear-gradient(180deg, #FFFFFF, #F2FBF6); }

/* O brilho mint do botão principal é feito para fundo escuro: sobre o claro ele vira
   uma mancha. Na banda clara o botão fica chapado. */
.section-clara .btn-primary {
  color: var(--brand-cloud);
  box-shadow: 0 6px 20px -10px rgba(3, 137, 94, 0.55);
}
.section-clara .btn-primary:hover { box-shadow: 0 10px 26px -10px rgba(3, 137, 94, 0.7); }
.section-clara .eyebrow .dot { box-shadow: none; animation: none; }

/* Reduced motion */


/* ========== Modo perf-lite ==========
   Ativado via JS (máquina fraca detectada ou watchdog do líquido).
   Corta o que pesa em GPU fraca: backdrop-filter (re-blur constante),
   filter no canvas e animações decorativas. O chat do hero (funcional)
   continua animando. */
html.perf-lite #liquid-canvas { filter: none; }
html.perf-lite *,
html.perf-lite *::before,
html.perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* As animações da página continuam: são transform/opacity, baratas. Congelar tudo aqui
   deixava a página inteira parada em PC que só engasgou no carregamento. */
html.perf-lite header.hero::before { animation: none; }
/* blur estático menor no fundo do hero (era 38px animado) */
html.perf-lite header.hero::before { filter: blur(20px) saturate(1.1); }
/* nav perde o vidro fosco → fundo sólido pra manter legível */
html.perf-lite .nav { background: rgba(3,21,15, 0.94); }
/* ---- Faixa de confiança (logo abaixo do hero) ---- */
.trust-strip { padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.trust-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.trust-strip li { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 1px solid var(--rule-strong); min-width: 0; }
.trust-strip b { color: var(--ink-0); font-weight: 600; font-size: 14px; }
.trust-strip span { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
@media (max-width: 880px) { .trust-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .trust-strip ul { grid-template-columns: 1fr; gap: 12px; } }

/* ---- Comparação chatbot × byflows ---- */
.compare {
  margin-top: 14px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10,60,52,0.58), rgba(4, 38, 31,0.48));
  backdrop-filter: blur(14px);
}
.compare-head, .compare-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
.compare-head span {
  padding: 16px 24px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--rule-strong);
}
.compare-head .is-us { color: var(--accent); }
.compare-row span {
  padding: 18px 24px; font-size: 15px; line-height: 1.45; color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.compare-row:last-child span { border-bottom: 0; }
.compare-row .is-us, .compare-head .is-us {
  color: var(--ink-0);
  background: rgba(175,245,213,0.06);
  border-left: 1px solid var(--rule);
}
.compare-row .is-us::before {
  content: "✓ "; color: var(--accent); font-weight: 600;
}
@media (max-width: 560px) {
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row span { padding: 14px 18px; border-bottom: 0; }
  .compare-row span:first-child { padding-bottom: 6px; font-size: 13px; text-decoration: line-through; text-decoration-color: var(--ink-3); }
  .compare-row .is-us { border-left: 0; border-bottom: 1px solid var(--rule); }
  .compare-row:last-child .is-us { border-bottom: 0; }
}

/* ---- Explicador dos planos ---- */
.plan-explainer {
  margin-top: 18px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.plan-explainer > div {
  border: 1px solid var(--rule); border-radius: 18px; padding: 22px 24px;
  background: rgba(4, 38, 31,0.36);
}
.plan-explainer b { display: block; color: var(--ink-0); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.plan-explainer p { color: var(--ink-1); font-size: 14px; line-height: 1.6; margin: 0; }
.plan-explainer p b { display: inline; font-size: inherit; margin: 0; }
@media (max-width: 760px) { .plan-explainer { grid-template-columns: 1fr; } }
.plan-explainer > .largo { grid-column: 1 / -1; }

/* Selo do Asaas (#354): exigência da homologação BaaS perto de todo texto que fala de cobrar
   pelo Asaas. A imagem vem da CDN do Asaas com o id da Byflows; só a largura é fixada
   (SVG 188×69), 120 no celular e 160 no desktop, como o SeloAsaas do app. */
.selo-asaas { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.selo-asaas a { display: inline-block; width: fit-content; line-height: 0; }
.selo-asaas img { width: 160px; height: auto; }
.plan-explainer .selo-asaas p.selo-asaas-texto,
.selo-asaas-texto { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); max-width: 72ch; margin: 0; }
.selo-asaas-texto a { text-decoration: underline; text-underline-offset: 2px; }
.selo-asaas-rodape { margin: 0 0 24px; }
.section-clara .plan-explainer .selo-asaas p.selo-asaas-texto { color: var(--ink-1); }
@media (max-width: 760px) { .selo-asaas img { width: 120px; } }

/* Preço: lista de recursos pode ter frases mais longas agora */
.price-card .feats li { line-height: 1.4; }

/* FAQ: link dentro do aside e negrito dentro da resposta */
.section-head .hed-aside a { color: var(--accent-2); border-bottom: 1px solid rgba(127,224,184,0.4); }
.faq-item .a b { color: var(--ink-0); font-weight: 600; }

/* ---- CTA fixo no celular ---- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(3,21,15,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule-strong);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.sticky-cta span { color: var(--ink-1); font-size: 13px; }
.sticky-cta .btn { padding: 11px 18px; font-size: 14px; }
.sticky-cta.on { transform: none; }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  /* O rodapé precisa de folga pro CTA fixo não tampar o toggle de efeitos. */
  footer { padding-bottom: 96px; }
}
/* Letreiro: o trilho deslizava por baixo do rótulo "atende em". */
.ticker-label { position: relative; z-index: 1; background: rgba(3,21,15,0.95); }
/* Rótulo do letreiro cobre o trilho na altura toda. */
.ticker-label { padding-top: 14px; padding-bottom: 14px; margin: -14px 0; }
/* Letreiro: o trilho animado fica recortado num wrapper — nada desliza por
   trás do rótulo, independente de stacking context do transform. */
.ticker-clip { overflow: hidden; flex: 1; min-width: 0; }

/* =========================================================
   LP v2 (issue #135) — o que muda em relação à LP atual.
   Dois raios só, vindos de token. Hero sem caixa. Telas reais.
   Seções com ritmos diferentes em vez de um molde repetido.
   ========================================================= */
:root {
  --r-1: 10px;   /* controles, chips, nós do diagrama */
  --r-2: 20px;   /* janelas, cartões, bandas */
}
.premium-shell, .compare, .price-card, .plan-explainer > div, .janela { border-radius: var(--r-2); }
.premium-machine, .machine-node, .price-card .limits, .nav-drawer ul a { border-radius: var(--r-1); }

/* Fundo pontilhado discreto (o app usa o mesmo): dá textura sem caixa. */
.section-telas::after,
.section-passos::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(175,245,213,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}

/* ---------- Janela (moldura de navegador para as telas reais) ---------- */
.janela {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(175,245,213,0.22);
  background: #04261F;
  box-shadow:
    0 60px 120px -40px rgba(0,0,0,0.85),
    0 0 0 1px rgba(3,24,20,0.9),
    0 0 90px -20px rgba(175,245,213,0.28);
}
.janela img { display: block; width: 100%; height: auto; }
.janela-barra {
  display: flex; align-items: center; gap: 14px;
  height: 38px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(8,73,59,0.55), rgba(4,38,31,0.9));
  border-bottom: 1px solid rgba(175,245,213,0.12);
}
.janela-dots { display: inline-flex; gap: 6px; }
.janela-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(175,245,213,0.18); border: 1px solid rgba(175,245,213,0.18); }
.janela-url {
  flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(3,21,15,0.5);
  max-width: 420px; margin: 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Hero v2 ---------- */
.hero-v2 {
  min-height: auto;
  padding: 150px 0 0;
  display: block;
  overflow: visible;
}
.hero-v2-copy {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  position: relative; z-index: 2;
}
.hero-v2 h1 {
  max-width: 17ch;
  margin: 22px auto 22px;
  font-size: clamp(42px, 6.2vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.03em;
}
@media (min-width: 981px) { .hero-v2 h1 { font-size: clamp(44px, 6.2vw, 88px); max-width: 17ch; } }
.hero-v2 .lede { margin: 0 auto 30px; max-width: 54ch; }
.hero-v2 .cta-row { justify-content: center; margin-bottom: 0; }

/* O palco: a tela entra deitada (perspectiva) e levanta com o scroll — --levanta vai de 0 a 1. */
.hero-v2-stage {
  position: relative;
  margin: 64px auto 0;
  max-width: 1120px;
  perspective: 1600px;
  z-index: 1;
}
.hero-v2-janela {
  transform: rotateX(calc(14deg * (1 - var(--levanta, 0)))) translateY(calc(-10px * var(--levanta, 0)));
  transform-origin: 50% 0;
  transition: transform .12s linear;
  will-change: transform;
  margin-bottom: -1px;
}
/* Luz por baixo da tela, no hero: é o "líquido" vazando pela borda. */
.hero-v2-stage::before {
  content: "";
  position: absolute; left: 10%; right: 10%; top: 8%; height: 80%;
  background: radial-gradient(ellipse at 50% 60%, rgba(175,245,213,0.28), transparent 60%);
  filter: blur(40px);
  z-index: -1;
}
/* Fade na base: a tela some dentro da faixa de confiança em vez de terminar seca. */
.hero-v2-stage::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background: linear-gradient(180deg, transparent, var(--bg-0) 92%);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 560px) {
  .hero-v2 { padding-top: 120px; }
  .hero-v2 h1 { font-size: 40px; max-width: none; }
  .hero-v2 .lede { font-size: 15px; }
  .hero-v2-stage { margin-top: 40px; }
  .hero-v2-janela { transform: none; }
  .janela-barra { height: 30px; }
  .janela-url { font-size: 9px; }
}

/* ---------- O que ela faz: frase por linha, sem caixa ---------- */
.section-faz { padding-top: 120px; }
.section-faz > .container > .eyebrow { margin-bottom: 36px; }
.faz { display: grid; }
.faz-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: baseline;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}
.faz-linha:last-child { border-bottom: 1px solid var(--rule); }
.faz-linha h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7.6vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink-0);
  transition: color .3s;
}
.faz-linha:hover h2 { color: var(--accent); }
.faz-linha:last-child h2 { color: var(--accent); }
.faz-linha p { color: var(--ink-1); font-size: 17px; line-height: 1.6; max-width: 42ch; text-wrap: pretty; }
@media (max-width: 760px) {
  .faz-linha { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .faz-linha h2 { font-size: 52px; }
  .faz-linha p { font-size: 15px; }
}

/* ---------- O painel, de verdade: scroll com tela fixa ---------- */
.telas-head { max-width: 760px; margin-bottom: 56px; }
.telas-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 18px 0 16px; text-wrap: balance;
}
.telas-head h2 em { font-style: normal; color: var(--accent); }
.telas-head p { color: var(--ink-1); font-size: 16px; line-height: 1.6; max-width: 52ch; }
.telas {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 2.2fr);
  gap: 56px;
  align-items: start;
}
.telas-passos { display: grid; }
.tela-passo {
  padding: 26px 0 26px 22px;
  border-left: 1px solid var(--rule);
  position: relative;
  opacity: 0.42;
  transition: opacity .3s;
  min-height: 34vh;
  display: flex; flex-direction: column; justify-content: center;
}
.tela-passo::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}
.tela-passo.is-on { opacity: 1; }
.tela-passo.is-on::before { transform: scaleY(1); }
.passo-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); }
.tela-passo h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; margin: 10px 0 8px; }
.tela-passo p { color: var(--ink-1); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.tela-passo p b { color: var(--accent); font-weight: 600; }
.telas-palco { position: sticky; top: 96px; }
.telas-janela { box-shadow: 0 40px 100px -40px rgba(0,0,0,0.9), 0 0 80px -30px rgba(175,245,213,0.25); }
.telas-quadro { position: relative; aspect-ratio: 1800 / 1109; }
.telas-quadro img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transform: scale(1.015);
  transition: opacity .45s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1);
}
.telas-quadro img.is-on { opacity: 1; transform: none; }
.telas-nota { margin-top: 28px; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 900px) {
  .telas { grid-template-columns: 1fr; gap: 24px; }
  .telas-palco { position: relative; top: 0; order: -1; }
  .tela-passo { min-height: 0; padding: 18px 0 18px 18px; opacity: 1; }
  .tela-passo::before { display: none; }
  /* No celular a tela não troca por scroll: cada passo vira um botão que troca a imagem. */
  .tela-passo { cursor: pointer; }
  .tela-passo.is-on { border-left-color: var(--accent); }
}

/* ---------- Para quem: leitura estável, destaque discreto na linha ---------- */
.section-nichos .section-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; }
.section-nichos .section-head h2 { font-size: clamp(36px, 4vw, 54px); line-height: 1.08; letter-spacing: -.035em; max-width: 20ch; }
.ramos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ramos li {
  display: grid; position: relative; isolation: isolate;
  grid-template-columns: 40px minmax(0, .8fr) minmax(0, 1.4fr);
  align-items: center; gap: 20px;
  padding: 22px 12px;
  border-bottom: 1px solid var(--rule);
}
.ramos li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(175,245,213,.055), rgba(175,245,213,.015));
  opacity: 0; transition: opacity 180ms cubic-bezier(.22,1,.36,1);
}
.ramos b {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(23px, 2.2vw, 29px); letter-spacing: -.025em; color: var(--ink-0);
}
.ramo-ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--accent-2); background: rgba(175,245,213,.045); border-radius: 10px;
}
.ramo-ico svg { width: 20px; height: 20px; }
.ramo-desc { color: var(--ink-1); font-size: 15px; line-height: 1.65; max-width: 62ch; }
.ramos-mais { margin-top: 24px; color: var(--ink-2); font-size: 13px; line-height: 1.9; max-width: 90ch; }
.ramos-mais span { color: var(--accent); margin-right: 8px; }
@media (hover: hover) and (pointer: fine) {
  .ramos li:hover::before { opacity: 1; }
}
@media (max-width: 880px) {
  .section-nichos .section-head { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .ramos li { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 14px; padding: 20px 0; }
  .ramos li b, .ramo-desc { grid-column: 2; }
  .ramo-ico { width: 32px; height: 32px; align-self: start; grid-row: span 2; }
  .ramo-ico svg { width: 18px; height: 18px; }
  .ramo-desc { font-size: 14px; }
}


/* ---------- Como colocar no ar: linha do tempo ---------- */
.linha-tempo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}
.linha-tempo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--rule-strong) 60%, transparent);
}
.linha-tempo li { position: relative; padding-top: 30px; }
.linha-tempo li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-0); border: 1px solid var(--accent); box-shadow: 0 0 12px rgba(175,245,213,0.5);
}
.linha-tempo li:first-child::before { background: var(--accent); }
.linha-tempo span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); }
.linha-tempo h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; margin: 10px 0 8px; line-height: 1.2; }
.linha-tempo p { color: var(--ink-1); font-size: 14px; line-height: 1.55; }
@media (max-width: 980px) {
  .linha-tempo { grid-template-columns: 1fr; gap: 0; padding-left: 26px; }
  .linha-tempo::before { top: 0; bottom: 0; left: 5px; right: auto; height: auto; width: 1px; background: linear-gradient(180deg, var(--accent), var(--rule-strong)); }
  .linha-tempo li { padding: 0 0 26px 0; }
  .linha-tempo li::before { left: -26px; top: 6px; }
}

/* ---------- Banda clara: polvo + comparação ---------- */
.section-polvo .premium-shell {
  background: linear-gradient(135deg, rgba(3,137,94,0.08), transparent 40%), var(--bg-1);
  border-color: var(--rule);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
}
.section-polvo .premium-shell::before { opacity: 0.35; }
.section-polvo .premium-machine {
  border-color: rgba(4,38,31,0.14);
  background: linear-gradient(180deg, #F6FDF9, #E9FAF2), radial-gradient(ellipse at 50% 50%, rgba(3,137,94,0.10), transparent 62%);
}
.section-polvo .premium-machine::before {
  border-color: rgba(4,38,31,0.08);
  background-image: linear-gradient(rgba(4,38,31,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(4,38,31,0.07) 1px, transparent 1px);
}
.section-polvo .machine-node { background: rgba(255,255,255,0.92); border-color: rgba(3,137,94,0.3); backdrop-filter: none; box-shadow: 0 14px 30px -20px rgba(4,38,31,0.35); }
.section-polvo .machine-core { color: var(--brand-cloud); box-shadow: 0 0 0 12px rgba(3,137,94,0.08), 0 0 50px rgba(3,137,94,0.28); background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.35), transparent 24%), linear-gradient(180deg, #03A36F, #03895E); }
.section-polvo .machine-core img { filter: brightness(10); opacity: 0.95; }
.section-polvo .machine-core span { color: var(--brand-cloud); }
.section-polvo .machine-line { background: linear-gradient(90deg, transparent, rgba(3,137,94,0.75), transparent); }
.section-polvo .machine-line::after { background: var(--accent); box-shadow: 0 0 10px rgba(3,137,94,0.6); }
.section-polvo .premium-copy p b { color: var(--ink-0); }
.compara-head { margin: 72px 0 20px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: baseline; }
.compara-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.02em; line-height: 1.05; }
.compara-head p { color: var(--ink-1); font-size: 16px; }
.section-polvo .compare { background: var(--bg-1); backdrop-filter: none; box-shadow: var(--shadow-card); }
.section-polvo .compare-row .is-us, .section-polvo .compare-head .is-us { background: rgba(3,137,94,0.06); }
@media (max-width: 640px) { .compara-head { grid-template-columns: 1fr; gap: 6px; margin-top: 48px; } }

/* ---------- Seus dados: definição por definição, sem caixa ---------- */
.dados {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px; margin: 0;
  border-top: 1px solid var(--rule);
}
.dados > div { padding: 26px 0 28px; border-bottom: 1px solid var(--rule); }
.dados dt { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink-0); margin-bottom: 8px; line-height: 1.25; }
.dados dt::before { content: "— "; color: var(--accent); }
.dados dd { margin: 0; color: var(--ink-1); font-size: 14px; line-height: 1.6; }
.security-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 26px; }
.security-links a { color: var(--accent-2); font-size: 14px; border-bottom: 1px solid rgba(127,224,184,0.35); }
@media (max-width: 900px) { .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dados { grid-template-columns: 1fr; } }

/* ---------- FAQ: duas colunas com largura de leitura ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 72px; align-items: start; }
.faq-lado { position: sticky; top: 110px; }
.faq-lado h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 18px 0 18px; text-wrap: balance;
}
.faq-lado h2 em { font-style: normal; color: var(--accent); }
.faq-lado p { color: var(--ink-1); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.faq-lado p a { color: var(--accent-2); border-bottom: 1px solid rgba(127,224,184,0.4); }
.section-faq .faq { max-width: 680px; }
.section-faq .faq-item { padding: 20px 0; }
.section-faq .faq-item .q { font-size: clamp(17px, 1.5vw, 20px); }
.section-faq .faq-item .a { font-size: 14.5px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } .faq-lado { position: static; } }

/* Menos vão entre seções, como na LP atual. */
.section { padding: 96px 0; }
.section-head { margin-bottom: 44px; }
@media (max-width: 720px) { .section { padding: 64px 0; } .section-head { margin-bottom: 28px; } }

/* `overflow-x: hidden` no body faz o body virar contêiner de rolagem e mata o `position: sticky`
   do palco de telas. `clip` corta o vazamento horizontal do mesmo jeito, sem esse efeito. */
body { overflow-x: clip; }
/* O bloco do hero antigo (que zerava o itálico do <em>) não veio para a v2. */
.hero-v2 h1 em { font-style: normal; color: var(--accent); font-weight: 700; }
/* Três linhas no desktop, não quatro: a tela precisa aparecer na dobra. */
@media (min-width: 981px) { .hero-v2 h1 { font-size: clamp(44px, 5.3vw, 76px); max-width: 18ch; } }
.faz-linha h2 { font-size: clamp(48px, 7vw, 100px); }

/* =========================================================
   LP v2 — 2ª rodada (revisão do dono, 11/09)
   ========================================================= */

/* Bolinha pulsante fora de todo rótulo: o rótulo é só o texto, em esmeralda. */
.eyebrow .dot, .diff-kicker::before { display: none; }
.eyebrow { color: var(--accent); gap: 0; }
.diff-kicker { gap: 0; }

/* ---------- Hero: captura do app no celular ---------- */
.hero-v2-frame { position: relative; }
.hero-v2-celular { display: none; }
@media (max-width: 720px) {
  .hero-v2-frame { display: none; }
  .hero-v2-stage::before { left: 20%; right: 20%; }
  .hero-v2-stage::after { height: 30%; }
  .hero-v2-celular {
    display: block;
    width: min(300px, 78vw);
    margin: 0 auto;
    aspect-ratio: 780 / 1688;
    max-height: 560px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(175,245,213,0.28);
    background: #04261F;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.85), 0 0 60px -20px rgba(175,245,213,0.3);
  }
  .hero-v2-celular img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
}

/* ---------- O que ela faz: 2×2, menor, sem quebrar o ritmo ---------- */
.faz-grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  border-top: 1px solid var(--rule);
}
.faz-grade .faz-linha {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 30px 0 34px;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  align-content: start;
}
.faz-grade .faz-linha h2 { font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -0.03em; }
.faz-grade .faz-linha p { font-size: 15.5px; max-width: 40ch; }
@media (max-width: 760px) {
  .faz-grade { grid-template-columns: 1fr; }
  .faz-grade .faz-linha { padding: 22px 0; }
  .faz-grade .faz-linha h2 { font-size: 40px; }
}

/* ---------- Telas: no celular, o app no celular ---------- */
.telas-quadro picture { display: contents; }
@media (max-width: 720px) {
  .telas-janela { max-width: 300px; margin: 0 auto; border-radius: 34px; }
  .telas-janela .janela-barra { display: none; }
  .telas-quadro { aspect-ratio: 780 / 1688; max-height: 560px; }
  .telas-quadro img { object-fit: cover; object-position: top; }
}

/* ---------- Como colocar no ar: a linha se desenha, os passos acendem em sequência ---------- */
.linha-tempo::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(0.16,1,0.3,1) .1s; }
.linha-tempo.in::before { transform: scaleX(1); }
.linha-tempo li { padding-top: 34px; }
.linha-tempo li::before { transform: scale(0); transition: transform .4s cubic-bezier(0.16,1,0.3,1), background .3s; }
.linha-tempo.in li::before { transform: scale(1); }
.linha-tempo.in li:nth-child(2)::before { transition-delay: .25s; }
.linha-tempo.in li:nth-child(3)::before { transition-delay: .5s; }
.linha-tempo.in li:nth-child(4)::before { transition-delay: .75s; }
.linha-tempo.in li:nth-child(5)::before { transition-delay: 1s; }
.passo-ico {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--rule-strong);
  color: var(--accent);
  background: rgba(4,38,31,0.6);
  margin-bottom: 16px;
  transition: background .3s, color .3s, box-shadow .3s, transform .35s cubic-bezier(0.16,1,0.3,1);
}
.passo-ico svg { width: 22px; height: 22px; }
.linha-tempo li:hover .passo-ico { background: var(--accent); color: var(--bg-0); box-shadow: 0 0 30px -4px rgba(175,245,213,0.7); transform: translateY(-3px); }
.linha-tempo li:hover::before { background: var(--accent); }
@media (max-width: 980px) {
  .linha-tempo::before { transform: scaleY(0); transform-origin: center top; }
  .linha-tempo.in::before { transform: scaleY(1); }
  .linha-tempo li { padding-top: 0; }
  .passo-ico { margin-bottom: 10px; }
}

/* ---------- Comparação: quem é quem, sem precisar ler ---------- */
.compara-head h2 em { font-style: normal; color: var(--accent); }
.compare-v2 { border-color: rgba(4,38,31,0.14); }
.compare-v2 .compare-head span { display: grid; gap: 2px; padding: 18px 24px; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.compare-v2 .compare-head b { font-size: 16px; font-weight: 600; color: var(--ink-1); }
.compare-v2 .compare-head small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.compare-v2 .compare-head .is-us { grid-template-columns: 26px 1fr; column-gap: 10px; align-items: center; background: var(--brand-emerald); border-left: 0; }
.compare-v2 .compare-head .is-us img { width: 26px; height: 26px; grid-row: span 2; }
.compare-v2 .compare-head .is-us b { color: #fff; }
.compare-v2 .compare-head .is-us small { color: rgba(255,255,255,0.75); }
.compare-v2 .compare-row span:first-child { color: var(--ink-3); }
.compare-v2 .compare-row span:first-child::before { content: "✕"; display: inline-block; width: 18px; color: rgba(4,38,31,0.35); font-weight: 600; }
.compare-v2 .compare-row .is-us { background: rgba(3,137,94,0.07); border-left: 2px solid var(--brand-emerald); color: var(--ink-0); }
.compare-v2 .compare-row .is-us::before { content: "✓"; display: inline-block; width: 18px; color: var(--brand-emerald); font-weight: 700; }
.compare-v2 .compare-row .is-us b { font-weight: 600; color: var(--brand-emerald); }
@media (max-width: 560px) {
  .compare-v2 .compare-head { display: grid; grid-template-columns: 1fr 1fr; }
  .compare-v2 .compare-head span { padding: 12px 14px; }
  .compare-v2 .compare-head .is-us { grid-template-columns: 20px 1fr; }
  .compare-v2 .compare-row span:first-child { text-decoration: none; font-size: 13px; }
}

/* ---------- Seus dados: o tick dos recibos no lugar do travessão ---------- */
.dados dt::before { content: none; }
.dados dt { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: start; }
.dados .ok { width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--accent); position: relative; }
.dados .ok::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border-right: 2px solid var(--bg-0); border-bottom: 2px solid var(--bg-0); transform: rotate(45deg); }
.dados dd { padding-left: 30px; }

/* ---------- Hero: produto na primeira dobra, movimento com a rolagem ---------- */
.hero-v2 { padding-top: 132px; }
.hero-v2-copy { max-width: 1040px; }
.hero-v2 h1 {
  max-width: none;
  font-size: clamp(44px, 4.7vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin: 24px auto;
}
.hero-v2 h1 > span { display: block; }
.hero-v2 .lede { max-width: 60ch; line-height: 1.6; margin-bottom: 24px; }
.hero-v2 .cta-row { gap: 10px; }
.hero-preview-link {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: fit-content; margin: 22px auto 0;
  font-size: 12px; color: var(--ink-1); position: relative; z-index: 2;
}
.hero-preview-link span { transition: transform 220ms cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .hero-preview-link:hover span { transform: translateY(3px); }
}
.hero-v2-stage { margin-top: 34px; perspective: 1800px; }
.hero-v2-janela {
  transform: rotateX(9deg) translateY(0);
  transition: none;
  will-change: auto;
  border-color: rgba(175,245,213,.3);
  box-shadow: 0 2px 0 rgba(233,250,242,.08) inset, 0 36px 90px -36px rgba(0,0,0,.85);
}
.hero-v2-janela .janela-barra { position: relative; height: 42px; background: rgba(4,38,31,.95); }
.hero-window-label { position: absolute; right: 18px; font-size: 10px; color: var(--ink-2); }
.hero-v2-stage::after { height: 24%; }
@media all {
  .hero-v2-copy > *, .hero-preview-link, .hero-v2-frame, .hero-v2-celular {
    animation: hero-arrive 650ms cubic-bezier(.22,1,.36,1) both;
  }
  .hero-v2-copy h1 { animation-delay: 60ms; }
  .hero-v2-copy .lede { animation-delay: 120ms; }
  .hero-v2-copy .cta-row { animation-delay: 180ms; }
  .hero-preview-link { animation-delay: 220ms; }
  .hero-v2-frame, .hero-v2-celular { animation-delay: 260ms; }
}
@keyframes hero-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .hero-v2 { padding-top: 112px; }
  .hero-v2 h1 { font-size: clamp(36px, 6.3vw, 46px); letter-spacing: -.04em; }
  .hero-v2 h1 > span { display: inline; }
  .hero-v2 .lede { font-size: 15px; line-height: 1.65; }
  .hero-v2-stage { margin-top: 30px; }
  .hero-v2-stage::after { height: 20%; }
}

/* A resposta mais longa do FAQ (a de vendas) mede 431px num telefone de 320px de
   largura, e o teto de 400px do acordeão cortava o fim dela — a última frase era
   justamente o que a IA NÃO faz. O teto existe só para a transição ter um alvo. */
.faq-item.open .a { max-height: 720px; }

/* =========================================================
   Rodada de 12/09 (tarde) — hero com palavra girando, relógio no CTA final,
   "sistema inteiro" no painel e as etapas na ordem real
   ========================================================= */

/* ---------- CTA final: a hora de quem lê, não uma palavra girando de novo ---------- */
.agora { margin: 18px auto 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ink-1); }
.agora-hora { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; color: var(--ink-0); margin-bottom: 4px; }
.final-cta .agora + h2 { margin-top: 18px; }
.final-cta p.agora { margin-bottom: 0; }
@media (max-width: 720px) { .agora { font-size: 15px; } }

/* ---------- O painel: o sistema inteiro, com o nome que o lead entende ---------- */
.sistema {
  list-style: none; margin: 0 0 48px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px;
  border-top: 1px solid var(--rule);
}
.sistema li { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); display: grid; gap: 5px; align-content: start; }
.sistema b { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink-0); }
.sistema span { color: var(--ink-1); font-size: 13.5px; line-height: 1.55; }
.sistema i { font-style: normal; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
@media (max-width: 980px) { .sistema { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sistema { grid-template-columns: 1fr; margin-bottom: 32px; } .sistema li { padding: 14px 0 16px; } }

/* ---------- Etapas: número + tempo estimado no mesmo rótulo ---------- */
.linha-tempo span { letter-spacing: .12em; }


/* ---------- Banda clara do polvo: só o cabeçalho sobrou do bloco antigo ---------- */
.premium-copy { display: grid; grid-template-columns: 1.2fr .8fr; gap: 72px; align-items: end; margin-bottom: 24px; }
.premium-copy h2 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 600; line-height: 1.05; letter-spacing: -.05em; }
.premium-copy h2 em { color: var(--accent); font-style: normal; }
.section-polvo .premium-copy p { font-size: 16px; line-height: 1.8; max-width: 46ch; padding-bottom: 5px; }
.section-polvo .premium-copy p b { color: var(--ink-0); }
.flow-example-note { text-align: center; color: var(--ink-2); font-size: 11px; margin-top: 18px; }
@media (max-width: 720px) {
  .premium-copy { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }
  .section-polvo .premium-copy p { font-size: 15px; }
}

/* =========================================================
   HERO v3 — texto à esquerda, tela de bloqueio à direita
   ========================================================= */
.hero-v3 { padding: 120px 0 56px; }
.hero-v3-grade { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 40px; align-items: center; }
.hero-v3-copy { text-align: left; position: relative; z-index: 2; }
.hero-v3 h1 { margin: 20px 0 22px; max-width: none; font-size: clamp(38px, 3.6vw, 56px); line-height: 1.06; letter-spacing: -.045em; }
.hero-v3 h1 > span { display: block; }
.hero-v3 .lede { margin: 0 0 26px; max-width: 50ch; line-height: 1.6; }
.hero-v3 .cta-row { justify-content: flex-start; }
.hero-v3-nota { margin-top: 16px; font-size: 13px; color: var(--ink-2); }

/* A palavra passa por uma janela de uma linha. Uma palavra só no DOM: sai, a caixa muda de
   largura vazia, entra. O clip deixa espaço para o descendente do "g". */
/* Recorte com padding + margem negativa e clip-path: inset(0) — inset NEGATIVO é ignorado
   pelo navegador, e era por isso que a palavra entrando aparecia sobre a linha de baixo. A
   margem negativa devolve o espaço do padding, então a linha não muda de altura. */
.gira { display: inline-block; white-space: nowrap; color: var(--accent); padding: .03em 0 .1em; margin: -.03em 0 -.1em; clip-path: inset(0); transition: width 230ms cubic-bezier(.22,1,.36,1); }
/* Entrelinhas apertado no celular: a opacidade some ANTES do movimento na saída e só volta
   depois que a palavra já subiu um pouco na entrada, senão fica um fantasma encostando
   nas linhas vizinhas durante a troca. */
.gira-palavra { display: inline-block; transition: transform 320ms cubic-bezier(.22,1,.36,1), opacity 220ms linear 90ms; }
.gira-palavra.fora-cima { transform: translateY(-110%); opacity: 0; transition: transform 220ms cubic-bezier(.4,0,1,1), opacity 110ms linear; }
.gira-palavra.fora-baixo { transform: translateY(110%); opacity: 0; transition: none; }
.gira-medidor { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; }

/* Celular: sem 3D nenhum. preserve-3d + backface-visibility + perspective é o trio que
   mais quebra no Safari do iPhone (aparelho espelhado, dois visíveis, tela em branco);
   aqui a troca celular ↔ notebook vira um crossfade e os cartões ficam planos. */
@media (max-width: 980px) {
  .palco-hero, .hc, .hc-cena { perspective: none !important; }
  .palco-grupo, .giradiscos, .hc-grupo { transform: none !important; transform-style: flat !important; }
  .giradiscos { transition: none; }
  .aparelho { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) !important; backface-visibility: visible; opacity: 0; transition: opacity 700ms ease; pointer-events: none; }
  .aparelho.is-on { opacity: 1; }
  .trava-tela::after { display: none; }
  .hc-cena .hc-card { transform: none !important; }
  /* no celular os cartões são uma coluna: nada de baralho — na troca só esmaecem.
     (O empilhamento por --jy jogava os três um em cima do outro, em branco.) */
  .hc-cena .hc-card.junto { transform: none !important; opacity: .35; }
  .hc-cena .hc-card.junto > *:not(.hc-rotulo) { opacity: 1; }
  .hero-v3 { padding-top: 110px; }
  .hero-v3-grade { grid-template-columns: 1fr; gap: 40px; }
  .hero-v3 h1 { font-size: clamp(36px, 7.4vw, 54px); }
}
@media (max-width: 560px) {
  .trava-fone { width: 264px; height: 500px; border-radius: 40px; }
  .trava-relogio { font-size: 56px; }
  .trava-hora { padding-top: 46px; }
}


/* =========================================================
   O QUE ELA FAZ — o polvo de seis braços
   ========================================================= */
.section-faz2 { padding: 96px 0; }
.faz2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.faz2-texto h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.7vw, 52px); line-height: 1.06; letter-spacing: -.035em; margin: 16px 0 14px; }
.faz2-texto h2 em { font-style: normal; color: var(--accent); }
.faz2-lede { color: var(--ink-1); font-size: 16px; line-height: 1.6; max-width: 48ch; margin-bottom: 22px; }
.faz2-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.faz2-lista li { border-bottom: 1px solid var(--rule); }
.faz2-lista button { all: unset; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: baseline; width: 100%; padding: 11px 8px; cursor: pointer; }
.faz2-lista b { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--ink-2); transition: color .25s; }
.faz2-lista span { color: var(--ink-2); font-size: 14px; line-height: 1.45; transition: color .25s; }
.faz2-lista li.is-on b { color: var(--accent); }
.faz2-lista li.is-on span { color: var(--ink-0); }
.faz2-lista button:hover b { color: var(--ink-0); }
.faz2-lista button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faz2-lista button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.faz2-lista li.is-on button::after { transform: scaleX(1); transition: transform var(--ciclo, 3600ms) linear; }
.faz2.pausado .faz2-lista li.is-on button::after, .faz2.parado .faz2-lista li.is-on button::after { transition: none; }
.faz2-nota { margin-top: 14px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.hub { --tam: 440px; display: grid; justify-items: center; gap: 12px; }
.hub-msg, .hub-feito { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; font-size: 14px; line-height: 1.35; max-width: 100%; transition: opacity 200ms, transform 200ms; }
.hub-msg { background: #1b2a24; color: var(--ink-0); border-bottom-left-radius: 4px; }
.hub-msg-quem { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hub-feito { background: rgba(175,245,213,.09); border: 1px solid rgba(175,245,213,.28); color: var(--ink-0); opacity: 0; transform: translateY(6px); }
.hub-feito.is-on { opacity: 1; transform: none; }
.hub.troca .hub-msg { opacity: 0; transform: translateY(-6px); }
.hub-anel { position: relative; width: var(--tam); height: var(--tam); }
.hub-linhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-linhas .base { stroke: rgba(175,245,213,.14); stroke-width: 1.5; transition: stroke .35s; }
.hub-linhas .base.is-on { stroke: rgba(175,245,213,.45); }
.hub-linhas .pulso { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 22 400; stroke-dashoffset: 22; opacity: 0; }
.hub-linhas .pulso.is-on { opacity: 1; animation: hub-pulso 720ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes hub-pulso { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -160; opacity: .2; } }
.hub-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #1f6f53, #0a2c22); border: 1px solid rgba(175,245,213,.35); box-shadow: 0 0 0 10px rgba(175,245,213,.05), 0 0 60px rgba(175,245,213,.16); }
.hub-centro img { width: 46px; height: 46px; object-fit: contain; }
.hub.recebe .hub-centro { animation: hub-centro 620ms ease-out; }
@keyframes hub-centro { 40% { box-shadow: 0 0 0 20px rgba(175,245,213,.12), 0 0 90px rgba(175,245,213,.34); } }
.hub-no { --r: calc(var(--tam) * .386); position: absolute; left: 50%; top: 50%; width: 100px; display: grid; justify-items: center; gap: 6px; text-align: center; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) translate(-50%, -50%); }
.hub-ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #0b1a16; border: 1px solid rgba(175,245,213,.2); color: var(--ink-2); transition: background .35s, color .35s, border-color .35s, box-shadow .35s, transform .35s; }
.hub-ico svg { width: 24px; height: 24px; }
.hub-no b { font-size: 13px; font-weight: 600; color: var(--ink-2); transition: color .35s; white-space: nowrap; }
.hub-no.is-on .hub-ico { background: var(--accent); color: #062b23; border-color: var(--accent); box-shadow: 0 0 0 8px rgba(175,245,213,.1), 0 0 40px rgba(175,245,213,.35); transform: scale(1.06); }
.hub-no.is-on b { color: var(--accent); }
@media (max-width: 980px) {
  .faz2 { grid-template-columns: 1fr; gap: 36px; }
  .hub { order: -1; }
}
@media (max-width: 560px) {
  .section-faz2 { padding: 64px 0; }
  .hub { --tam: min(330px, 84vw); }
  .hub-ico { width: 44px; height: 44px; }
  .hub-ico svg { width: 19px; height: 19px; }
  .hub-no { width: 80px; gap: 4px; }
  .hub-no b { font-size: 11.5px; }
  .hub-centro { width: 78px; height: 78px; }
  .hub-centro img { width: 34px; height: 34px; }
  .hub-msg, .hub-feito { font-size: 13px; padding: 9px 13px; }
  .faz2-lista button { grid-template-columns: 96px minmax(0, 1fr); padding: 10px 4px; }
  .faz2-lista b { font-size: 16px; }
  .faz2-lista span { font-size: 13px; }
}


/* ---------- Hero: composição em camadas (mensagem → resposta → painel) ----------
   --ang: 1 = grupo deitado, 0 = alinhado (vem do scroll). --mx/--my: mouse, cada camada
   com um multiplicador diferente — é o que dá profundidade. */
.hc { margin: 0; position: relative; perspective: 1500px; }
.hc::before { content: ""; position: absolute; inset: 6% -10% 6%; background: radial-gradient(ellipse at 55% 45%, rgba(175,245,213,.2), transparent 62%); z-index: 0; }
.hc-grupo { --ang: 1; --mx: 0; --my: 0; position: relative; z-index: 1; height: 520px; transform-style: preserve-3d; transform: rotateY(calc(-16deg * var(--ang) + 5deg * var(--mx))) rotateX(calc(7deg * var(--ang) - 4deg * var(--my))); transition: transform 120ms linear; will-change: transform; }
.hc-orbita { position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-46%, -50%) translateZ(-60px); fill: none; }
.hc-orbita circle { stroke: rgba(175,245,213,.18); stroke-width: 1; }
.hc-orbita .hc-orbita-ponto { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: .07 1; stroke-linecap: round; animation: hc-orbita 14s linear infinite; }
@keyframes hc-orbita { to { stroke-dashoffset: -1; } }
.hc-card { position: absolute; border-radius: 18px; background: #0c1a16; border: 1px solid rgba(175,245,213,.16); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); color: var(--ink-0); transition: transform 140ms linear, opacity 260ms; }
.hc-back { left: 2%; top: 6%; width: 300px; padding: 16px 18px 18px; transform: rotate(-7deg) translate3d(calc(-14px * var(--mx)), calc(-10px * var(--my)), -40px); background: #111f1a; }
.hc-app { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-1); }
.hc-app b { font-weight: 500; }
.hc-app time { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.hc-ico { width: 18px; height: 18px; border-radius: 5px; background: #25D366; color: #fff; display: grid; place-items: center; }
.hc-ico svg { width: 12px; height: 12px; }
.hc-quem { display: block; font-size: 14px; font-weight: 600; margin-top: 12px; }
.hc-msg { font-size: 15px; line-height: 1.4; color: var(--ink-0); margin-top: 3px; }
.hc-main { left: 16%; top: 30%; width: 420px; padding: 18px 22px 18px; transform: translate3d(calc(6px * var(--mx)), calc(4px * var(--my)), 20px); background: linear-gradient(160deg, #10201b, #0a1713); }
.hc-topo { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.hc-topo img { width: 18px; height: 18px; }
.hc-resp { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.02em; line-height: 1.3; margin: 14px 0 16px; color: var(--ink-0); min-height: 2.6em; }
.hc-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hc-tag { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.hc-chip { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(175,245,213,.25); font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.hc-small { right: -2%; bottom: 4%; width: 296px; padding: 13px 14px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 11px; align-items: center; transform: translate3d(calc(18px * var(--mx)), calc(12px * var(--my)), 60px); background: #0f2a22; border-color: rgba(175,245,213,.3); }
.hc-small-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(175,245,213,.14); color: var(--accent); }
.hc-small-ico svg { width: 18px; height: 18px; }
.hc-rec { display: block; font-size: 13.5px; font-weight: 600; }
.hc-sub { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.hc-ok { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); position: relative; }
.hc-ok::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border-right: 2px solid #062b23; border-bottom: 2px solid #062b23; transform: rotate(45deg); }
.hc-small.pago { background: #0e3a2a; border-color: var(--accent); }
.hc-small.pago .hc-sub { color: var(--accent); font-weight: 600; }
.hc-legenda { position: relative; z-index: 1; margin-top: 4px; font-size: 12.5px; color: var(--ink-1); text-align: center; }
.hc-legenda span { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
@media (max-width: 980px) {
  .hc { perspective: none; }
  .hc-grupo { height: auto; transform: rotateX(calc(8deg * var(--ang))) translateY(calc(10px * var(--ang))); transform-origin: 50% 0; display: grid; gap: 10px; }
  .hc-orbita { display: none; }
  .hc-card { position: relative; inset: auto; width: auto; transform: none !important; }
  .hc-back { transform: rotate(-1.5deg) !important; margin: 0 6% 0 0; }
  .hc-main { margin-left: 6%; }
  .hc-small { margin: 0 0 0 18%; }
  .hc-resp { min-height: 0; }
}


/* =========================================================
   PARA QUEM — banda clara, parede de especialidades em movimento
   ========================================================= */
.section-nichos { padding: 88px 0 72px; overflow: hidden; }
.nichos-topo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: end; margin-bottom: 40px; }
.nichos-topo h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.04em; margin-top: 16px; }
.nichos-topo h2 em { font-style: normal; color: var(--accent); }
.nichos-ativo { justify-self: end; max-width: 34ch; padding-left: 22px; border-left: 3px solid var(--accent); }
.nichos-ativo-rotulo { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.nichos-ativo-nome { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em; line-height: 1.1; margin: 6px 0 4px; color: var(--ink-0); }
.nichos-ativo-faz { color: var(--ink-1); font-size: 15px; line-height: 1.5; }
.nichos-ativo.troca .nichos-ativo-nome, .nichos-ativo.troca .nichos-ativo-faz { animation: nichos-troca 360ms cubic-bezier(.22,1,.36,1); }
@keyframes nichos-troca { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* A parede: quatro fileiras de largura total, cada uma com o trilho duplicado deslizando
   metade do próprio comprimento — laço sem emenda. Sentidos alternados. */
/* A parede respeita a mesma coluna dos textos (1240px com 32px de margem): as fichas
   esmaecem exatamente onde o texto começa, em vez de sangrar até a borda da janela. */
.parede { display: grid; gap: 10px; box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 6px 32px; position: relative; overflow: hidden; }
.parede::before, .parede::after { content: ""; position: absolute; top: 0; bottom: 0; width: 96px; z-index: 2; pointer-events: none; }
.parede::before { left: 0; background: linear-gradient(90deg, var(--brand-cloud), transparent); }
.parede::after { right: 0; background: linear-gradient(270deg, var(--brand-cloud), transparent); }
.parede-trilho { will-change: transform; }
.parede-fileira { display: flex; width: max-content; }
.parede-trilho { display: flex; gap: 10px; padding-right: 10px; animation: parede-deriva var(--dur, 80s) linear infinite; animation-direction: var(--dir, normal); }
.parede-fileira[style*="--sentido:-1"] .parede-trilho { animation-direction: reverse; }
.parede:hover .parede-trilho, .parede.parado .parede-trilho { animation-play-state: paused; }
@keyframes parede-deriva { to { transform: translateX(calc(-100% - 10px)); } }
.esp { all: unset; box-sizing: border-box; white-space: nowrap; padding: 11px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.35vw, 19px); letter-spacing: -.01em; color: var(--ink-2); background: rgba(4, 38, 31, 0.05); border: 1px solid transparent; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.esp:hover { color: var(--ink-0); border-color: var(--rule-strong); }
.esp.is-on { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(3, 122, 84, .7); }
.esp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nichos-ramos { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.nichos-ramos button { all: unset; box-sizing: border-box; padding: 6px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: color .2s, background .2s; }
.nichos-ramos button:hover { color: var(--ink-0); }
.nichos-ramos li.is-on button { color: var(--accent); background: rgba(3, 122, 84, .08); font-weight: 600; }
.nichos-ramos button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nichos-nota { margin-top: 18px; color: var(--ink-2); font-size: 14px; max-width: 64ch; line-height: 1.55; }
@media (max-width: 900px) {
  .section-nichos { padding: 64px 0 56px; }
  .nichos-topo { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; }
  .nichos-ativo { justify-self: start; max-width: none; }
  .parede { gap: 8px; padding: 6px 16px; }
  .parede::before, .parede::after { width: 40px; }
  .parede-trilho { gap: 8px; padding-right: 8px; }
  .esp { padding: 9px 14px; font-size: 14px; }
  .nichos-ramos { margin-top: 24px; }
  .nichos-ramos button { padding: 5px 9px; font-size: 13px; }
}


/* =========================================================
   HERO — celular à noite, notebook de manhã, no mesmo palco inclinado
   ========================================================= */
.palco-hero { margin: 0; position: relative; perspective: 1500px; }
.palco-hero::before { content: ""; position: absolute; inset: 8% -6% 14%; background: radial-gradient(ellipse at 50% 50%, rgba(175,245,213,.16), transparent 66%); z-index: 0; }
.palco-grupo { --ang: 1; --mx: 0; --my: 0; position: relative; z-index: 1; height: 580px; transform-style: preserve-3d; transform: rotateY(calc(-18deg * var(--ang) + 6deg * var(--mx))) rotateX(calc(8deg * var(--ang) - 4deg * var(--my))) rotateZ(calc(-2deg * var(--ang))); transition: transform 120ms linear; will-change: transform; }
/* virada lenta o bastante para o giro ser lido (o ease-out de 720ms terminava o giro nos
   primeiros 150ms e parecia um corte seco). */
/* Giradiscos: os dois aparelhos ficam em lados opostos de um eixo e o eixo gira meia
   volta — o celular vai embora girando de verdade enquanto o notebook chega pelo outro
   lado. Nada some nem surge. */
.giradiscos { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--vira, 0deg)); transition: transform 1400ms cubic-bezier(.65,0,.25,1); will-change: transform; }
.aparelho { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(200px); backface-visibility: hidden; }
.trava-fone { transform: translate(calc(-50% + 36px), -50%) translateZ(200px); }
.trava-note { transform: translate(calc(-50% + 24px), -50%) rotateY(180deg) translateZ(200px); }
/* celular */
.trava-fone { width: 284px; height: 540px; border-radius: 44px; padding: 11px; background: #030807; box-shadow: 0 0 0 1px rgba(175,245,213,.22), 0 50px 110px -40px rgba(0,0,0,.95); }
.trava-tela { position: relative; height: 100%; border-radius: 37px; overflow: hidden; background: radial-gradient(120% 70% at 25% 0%, #2a6e55 0%, #0f3a2d 42%, #051410 100%); color: #eef9f3; }
.trava-tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.09) 45%, transparent 60%); transform: translateX(calc(-70% + 120% * (1 - var(--ang, 1)))); }
.trava-ilha { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 98px; height: 28px; border-radius: 16px; background: #000; }
.trava-hora { text-align: center; padding-top: 52px; }
.trava-dia { display: block; font-size: 13px; opacity: .85; }
.trava-relogio { display: block; font-family: var(--font-display); font-weight: 600; font-size: 64px; letter-spacing: -.04em; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.trava-notifs { list-style: none; margin: 22px 10px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.notif { display: none; border-radius: 22px; background: rgba(233,250,242,.16); padding: 11px 13px 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.notif.is-on { display: block; }
.notif-app { display: flex; align-items: center; gap: 7px; font-size: 11px; opacity: .85; }
.notif-app b { font-weight: 500; }
.notif-app time { margin-left: auto; }
.notif-ico { width: 18px; height: 18px; border-radius: 5px; background: #25D366; color: #fff; display: grid; place-items: center; }
.notif-ico svg { width: 12px; height: 12px; }
.notif-msg b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 5px; }
.notif-msg span { display: block; font-size: 13px; opacity: .92; line-height: 1.35; }
.notif-feito { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; padding: 7px 9px; border-radius: 12px; background: rgba(175,245,213,.2); color: #e4fbee; font-size: 11.5px; line-height: 1.35; }
.notif-feito i { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; background: var(--accent); position: relative; }
.notif-feito i::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 7px; border-right: 2px solid #062b23; border-bottom: 2px solid #062b23; transform: rotate(45deg); }
.notif.entra { animation: notif-entra 520ms cubic-bezier(.22,1,.36,1) both; }
.notif.entra .notif-feito { animation: notif-feito 380ms 650ms cubic-bezier(.22,1,.36,1) both; }
@keyframes notif-entra { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes notif-feito { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.trava-barra { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 112px; height: 4px; border-radius: 3px; background: rgba(238,249,243,.7); }
/* notebook */
.trava-note { width: min(100%, 470px); }
.note-tela { border-radius: 14px 14px 4px 4px; overflow: hidden; background: #04261F; border: 1px solid rgba(175,245,213,.3); box-shadow: 0 2px 0 rgba(233,250,242,.08) inset, 0 36px 90px -36px rgba(0,0,0,.85); }
.note-tela img { display: block; width: 100%; height: auto; }
.note-tela .janela-barra { position: relative; height: 34px; }
.note-rotulo { display: none; }
.note-base { height: 14px; margin: 0 -22px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #1b2a25, #0b1512); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); }
.palco-legenda { position: relative; z-index: 1; margin-top: 6px; font-size: 12.5px; color: var(--ink-1); text-align: center; }
.palco-legenda span { display: none; }
.palco-legenda.fone .palco-legenda-fone, .palco-legenda.note .palco-legenda-note { display: inline; }
.palco-legenda small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 2px; }
@media (max-width: 980px) {
  .palco-hero { perspective: none; }
  .palco-grupo { height: 560px; transform: rotateX(calc(10deg * var(--ang))) translateY(calc(12px * var(--ang))); transform-origin: 50% 20%; }
  .palco-hero { perspective: 1100px; }
  .trava-fone { width: 294px; height: 540px; border-radius: 44px; }
  .trava-relogio { font-size: 62px; }
  .trava-hora { padding-top: 52px; }
  .trava-note { width: min(560px, 100%); }
}


/* =========================================================
   CONVERSA EM AÇÃO — três cartões brancos em camadas na banda clara
   ========================================================= */
.hc-cena { max-width: 820px; margin: 0 auto; }
.hc-cena::before { inset: 6% -4%; background: radial-gradient(ellipse at 50% 50%, rgba(3,137,94,.16), transparent 62%); }
.hc-cena .hc-grupo { height: 440px; --ang: 0; }
.hc-cena .hc-orbita { width: 520px; height: 520px; transform: translate(-50%, -50%); }
.hc-cena .hc-orbita circle { stroke: rgba(4,38,31,.12); }
.hc-cena .hc-orbita .hc-orbita-ponto { stroke: var(--accent); }
.hc-cena .hc-card { background: #fff; color: var(--ink-0); border: 1px solid rgba(4,38,31,.1); box-shadow: 0 30px 70px -30px rgba(4,38,31,.5), 0 2px 6px -2px rgba(4,38,31,.12); }
.hc-cena .hc-rotulo { color: var(--ink-2); }
.hc-cena .hc-rotulo i { border-color: var(--rule-strong); color: var(--ink-1); }
/* cartão 1: a mensagem como ela aparece no WhatsApp */
.hc-cena .hc-back { left: 0; top: 0; width: 300px; padding: 12px 14px 12px; transform: rotate(-4deg) translate3d(calc(-14px * var(--mx)), calc(-10px * var(--my)), -40px); }
.hc-cena .hc-app { color: var(--ink-2); }
.hc-zap { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.hc-av { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #d6f0e4; color: #04261F; font-weight: 700; font-size: 13px; }
.hc-cena .hc-quem { margin: 2px 0 0; font-size: 14px; }
.hc-cena .hc-msg { margin-top: 2px; color: var(--ink-1); font-size: 14.5px; }
.hc-lidas { display: flex; gap: 6px; margin-top: 12px; }
.hc-lidas span { height: 6px; border-radius: 3px; background: rgba(4,38,31,.08); }
.hc-lidas span:nth-child(1) { width: 46%; } .hc-lidas span:nth-child(2) { width: 30%; } .hc-lidas span:nth-child(3) { width: 14%; }
/* cartão 2: a resposta e o que ela fez por trás */
.hc-cena .hc-main { left: 50%; top: 50%; width: 460px; padding: 16px 20px 16px; margin: -120px 0 0 -230px; background: linear-gradient(170deg, #ffffff, #f3fbf7); }
.hc-cena .hc-topo { color: var(--ink-2); }
.hc-tempo { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: rgba(3,137,94,.1); color: var(--accent); }
.hc-cena .hc-resp { color: var(--ink-0); font-size: clamp(18px, 1.5vw, 21px); margin: 10px 0 10px; min-height: 2.5em; }
.hc-feito { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hc-feito li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 8px; border: 1px solid var(--rule); background: rgba(4,38,31,.03); font-size: 12px; color: var(--ink-1); }
.hc-feito li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: 0 0 12px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 10px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / 10px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }
.hc-cena .hc-rodape { border-top: 1px solid var(--rule); padding-top: 12px; }
.hc-cena .hc-tag { color: var(--ink-2); }
.hc-botao { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hc-botao i { font-style: normal; }
/* cartão 3: o painel — esmeralda, com a mensagem que saiu */
.hc-cena .hc-small { right: 0; bottom: 2%; width: 300px; padding: 12px 14px 12px; display: block; background: linear-gradient(160deg, #047a56, #045f45); color: #fff; border-color: rgba(255,255,255,.18); }
.hc-small-topo { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 11px; align-items: center; }
.hc-cena .hc-small-ico { background: rgba(255,255,255,.16); color: #fff; }
.hc-cena .hc-rec { color: #fff; }
.hc-cena .hc-sub { color: rgba(255,255,255,.78); }
.hc-cena .hc-ok { background: #fff; }
.hc-cena .hc-ok::after { border-color: #047a56; }
.hc-small-bolha { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.12); }
.hc-bolha { display: block; font-size: 13px; line-height: 1.4; color: #fff; }
.hc-small-bolha small { display: block; margin-top: 6px; font-size: 10.5px; color: rgba(255,255,255,.7); }
.hc-cena .hc-small.pago { background: linear-gradient(160deg, #0b3b2c, #04261F); }
.hc-cena .hc-small.pago .hc-sub { color: var(--accent); }
/* A troca como um baralho: os três cartões deslizam até o centro e se empilham (o de trás
   embaixo, o do painel em cima), o conteúdo troca com eles juntos, e daí se abrem de novo
   nas posições. --jx/--jy: quanto cada um precisa andar até o centro (medido no v2.js). */
.hc-cena .hc-card { transition: transform 620ms cubic-bezier(.65,0,.25,1), box-shadow 620ms; }
.hc-cena .hc-card.junto { box-shadow: 0 18px 40px -24px rgba(4,38,31,.55); }
.hc-cena .hc-back.junto { transform: translate3d(var(--jx, 0px), var(--jy, 0px), -40px) rotate(-3deg) scale(.94); transition-delay: 0ms; }
.hc-cena .hc-main.junto { transform: translate3d(var(--jx, 0px), var(--jy, 0px), 20px) rotate(1.5deg) scale(.97); transition-delay: 70ms; }
.hc-cena .hc-small.junto { transform: translate3d(var(--jx, 0px), var(--jy, 0px), 60px) rotate(-2deg) scale(.95); transition-delay: 140ms; }
/* ao abrir, o de cima sai primeiro */
.hc-cena .hc-small { transition-delay: 0ms; }
.hc-cena .hc-main { transition-delay: 80ms; }
.hc-cena .hc-back { transition-delay: 160ms; }
.hc-cena .hc-card.junto .hc-rotulo { opacity: 0; }
.hc-cena .hc-card.junto > *:not(.hc-rotulo) { opacity: 0; transition: opacity 200ms; }
.hc-cena .hc-card > * { transition: opacity 260ms 120ms; }
.hc-rotulo { transition: opacity 200ms; }
.hc-rotulo { position: absolute; top: -26px; left: 4px; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.hc-rotulo i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule-strong); font-size: 9px; letter-spacing: 0; color: var(--ink-1); }
.hc-rotulo-small { top: -26px; bottom: auto; }
.hc-capitulos { list-style: none; margin: 22px auto 0; padding: 0; max-width: 820px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hc-capitulos button { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; padding-top: 10px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); }
.hc-capitulos button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rule); }
.hc-capitulos button i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hc-capitulos li.is-on button i { transform: scaleX(1); transition: transform var(--ciclo, 3400ms) linear; }
.hc-capitulos.pausado li.is-on button i { transition: none; }
.hc-capitulos button span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-right: 6px; }
.hc-capitulos li.is-on button { color: var(--ink-0); font-weight: 600; }
.hc-capitulos button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 980px) {
  .hc-cena .hc-grupo { height: auto; display: grid; gap: 34px; padding-top: 26px; }
  .hc-cena .hc-card { position: relative; inset: auto; width: auto; }
  .hc-cena .hc-back { transform: rotate(-1.5deg) !important; margin: 0 8% 0 0; }
  .hc-cena .hc-main { margin-left: 6%; }
  .hc-cena .hc-small { margin: 0 0 22px 12%; }
  .hc-rotulo-small { top: -22px; bottom: auto; }
  .hc-capitulos { gap: 8px; margin-top: 22px; }
  .hc-capitulos button b { display: none; }
}


/* ---------- Título que se revela com a rolagem ("Pronto em minutos…") ----------
   O v2.js quebra o título em palavras e acende cada uma conforme a seção sobe pela tela;
   a palavra que está acendendo passa por um gradiente mint → branco. */
.revela .rv { display: inline-block; opacity: .16; transform: translateY(.18em); transition: opacity 380ms cubic-bezier(.22,1,.36,1), transform 380ms cubic-bezier(.22,1,.36,1); }
.revela .rv.on { opacity: 1; transform: none; }
.revela .rv.acendendo { background: linear-gradient(90deg, var(--accent), var(--ink-0)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.revela em .rv.on { color: var(--accent); }


/* ---------- Celular: cena dos três cartões, regras no FIM do arquivo de propósito ----------
   As regras de celular do hero ficam antes das da cena no arquivo e perdiam a disputa por
   ordem (mesma especificidade). Aqui, por último, elas mandam. */
@media (max-width: 980px) {
  .hc-cena .hc-main { margin: 0 0 0 6% !important; left: auto !important; top: auto !important; }
  .hc-cena .hc-back, .hc-cena .hc-small { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
  .hc-cena .hc-card.junto { transform: none !important; opacity: .35; }
  .hc-cena .hc-card.junto > *:not(.hc-rotulo) { opacity: 1 !important; }
}

/* =========================================================
   CELULAR — adaptação com graça, sem o 3D que quebra no Safari
   (só transform de um elemento por vez: perspective() na própria função, sem
   preserve-3d nem backface-visibility). Regras no fim para vencerem por ordem.
   ========================================================= */
@media (max-width: 980px) {
  /* hero: o aparelho ativo flutua e se alinha com a rolagem; a troca é um giro leve + fade */
  .aparelho { transition: opacity 620ms ease, transform 900ms cubic-bezier(.45,0,.2,1); transform: translate(-50%, -50%) perspective(1100px) rotateX(calc(8deg * var(--ang, 0))) rotateY(-28deg) scale(.94) !important; }
  .aparelho.is-on { transform: translate(-50%, -50%) perspective(1100px) rotateX(calc(8deg * var(--ang, 0))) rotateY(0) scale(1) !important; animation: flutua 6s ease-in-out 1s infinite; }
  @keyframes flutua { 0%, 100% { margin-top: 0; } 50% { margin-top: -7px; } }
  .palco-hero::before { inset: 14% 6% 18%; }
  .trava-fone { width: 250px; height: 480px; border-radius: 38px; }
  .trava-relogio { font-size: 52px; }
  .palco-grupo { height: 520px; }

  /* cena: os três cartões em camadas também aqui — sobrepostos de leve, cada um com a sua inclinação */
  .hc-cena .hc-grupo { gap: 0; padding-top: 30px; }
  .hc-cena .hc-back { position: relative; z-index: 1; transform: rotate(-3deg) translateX(-2%) !important; margin: 0 10% -14px 0 !important; }
  .hc-cena .hc-main { position: relative; z-index: 2; transform: none !important; margin: 0 0 0 4% !important; box-shadow: 0 24px 50px -24px rgba(4,38,31,.55), 0 2px 6px -2px rgba(4,38,31,.15); }
  .hc-cena .hc-small { position: relative; z-index: 3; transform: rotate(1.5deg) translateX(3%) !important; margin: -14px 0 24px 12% !important; }
  .hc-rotulo { top: -22px; }
  .hc-cena .hc-back .hc-rotulo { left: 6px; }
  .hc-cena .hc-small .hc-rotulo { top: -22px; bottom: auto; }
  /* a troca: saem cada um para o seu lado e voltam */
  .hc-cena .hc-card { transition: transform 520ms cubic-bezier(.45,0,.2,1), opacity 380ms; }
  .hc-cena .hc-back.junto { transform: rotate(-3deg) translateX(-14%) !important; opacity: .2; }
  .hc-cena .hc-main.junto { transform: translateX(10%) !important; opacity: .2; }
  .hc-cena .hc-small.junto { transform: rotate(1.5deg) translateX(-10%) !important; opacity: .2; }
  .hc-cena .hc-card.junto > *:not(.hc-rotulo) { opacity: 1 !important; }
  .hc-cena .hc-orbita { display: block; width: 360px; height: 360px; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .6; }
}

/* celular: com os cartões sobrepostos, os rótulos 2 e 3 batiam no rodapé do cartão de cima —
   só o primeiro rótulo fica; os outros dois já se explicam pelo conteúdo. */


/* perf-lite (máquina fraca): para a parede, o giradiscos e os halos */
html.perf-lite .palco-hero::before, html.perf-lite .hc::before, html.perf-lite .hc-cena::before, html.perf-lite .trava-tela::after { display: none; }

/* Rótulos 1-2-3 da cena: dentro do cartão, não pendurados por fora. Fora do cartão eles
   ficavam cinza-claro sobre o fundo claro e batiam na borda do cartão de trás. */
.hc-cena .hc-rotulo { position: static; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: #03734F; }
.hc-cena .hc-rotulo i { width: 18px; height: 18px; border: 0; background: #03895E; color: #fff; font-size: 10px; font-weight: 700; }
.hc-cena .hc-small .hc-rotulo { color: rgba(255,255,255,.92); }
.hc-cena .hc-small .hc-rotulo i { background: #fff; color: #047a56; }
@media (max-width: 980px) { .hc-cena .hc-rotulo, .hc-cena .hc-small .hc-rotulo { position: static; top: auto; left: auto; bottom: auto; } }
.num-consulta { font-size: 30px !important; letter-spacing: -.02em; }
/* com o rótulo dentro, os cartões cresceram ~26px: o palco cresce junto para o cartão do
   painel não cobrir o botão "Ver no painel"; o "4 s" não quebra linha no celular */
@media (min-width: 981px) { .hc-cena .hc-grupo { height: 540px; } .hc-cena .hc-main { margin-top: -175px; } .hc-cena .hc-small { bottom: 0; right: 2%; } }
.hc-tempo { white-space: nowrap; flex: 0 0 auto; }


/* =========================================================
   CELULAR — rodada de 17/09 (moeda no hero, baralho em 2D, parede, comparação)
   No fim do arquivo de propósito: vence por ordem as regras de celular anteriores.
   ========================================================= */
@media (max-width: 980px) {
  /* 1. Hero: moeda. Sai girando até ficar de lado (sem fade no meio do caminho), e só
        depois o outro gira de lado até de frente. Nada surge do nada. */
  .aparelho, .aparelho.is-on { animation: none !important; }
  .aparelho {
    opacity: 0;
    transform: translate(-50%, -50%) perspective(1100px) rotateY(-90deg) !important;
    transition: transform 460ms cubic-bezier(.3,0,.2,1) 460ms, opacity 0s linear 460ms !important;
  }
  .aparelho.is-on {
    opacity: 1;
    transform: translate(-50%, -50%) perspective(1100px) rotateX(calc(8deg * var(--ang, 0))) rotateY(0deg) !important;
  }
  .aparelho.saindo {
    opacity: 1;
    transform: translate(-50%, -50%) perspective(1100px) rotateY(90deg) !important;
    transition: transform 460ms cubic-bezier(.7,0,.8,.4), opacity 0s linear 460ms !important;
  }

  /* 5. Cartões: o baralho também no celular, em 2D — cada cartão desliza até o do meio
        (distância medida no v2.js em --jy), empilham, trocam o conteúdo e voltam. Só
        transform de translate/scale/rotate: roda no compositor, não pesa. */
  .hc-cena .hc-card { transition: transform 560ms cubic-bezier(.65,0,.25,1), opacity 300ms !important; }
  .hc-cena .hc-back.junto { transform: translateY(var(--jy, 0px)) rotate(-4deg) scale(.94) !important; opacity: 1 !important; }
  .hc-cena .hc-main.junto { transform: translateY(var(--jy, 0px)) rotate(1.5deg) scale(.97) !important; opacity: 1 !important; }
  .hc-cena .hc-small.junto { transform: translateY(var(--jy, 0px)) rotate(-2deg) scale(.95) !important; opacity: 1 !important; }
  .hc-cena .hc-card.junto > * { opacity: 1 !important; }

  /* 3. Parede: esmaecimento mais largo nas bordas, fichas menores, três fileiras; a lista
        de ramos vira uma faixa que rola de lado em vez de seis linhas empilhadas. */
  .parede::before, .parede::after { width: 76px; }
  .parede .parede-fileira:nth-child(4) { display: none; }
  .esp { padding: 8px 13px; font-size: 13.5px; }
  .nichos-ramos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 22px -16px 0; padding: 0 16px 4px; gap: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); }
  .nichos-ramos::-webkit-scrollbar { display: none; }
  .nichos-ramos li { flex: 0 0 auto; }
  .nichos-ramos button { white-space: nowrap; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; }
  .nichos-nota { font-size: 14px; }
}
@media (min-width: 981px) {
  .parede::before, .parede::after { width: 140px; }
}

/* 4. Comparação no celular: cada linha vira um cartão com as duas respostas rotuladas —
      "Chatbot comum" riscado em cima, "Byflows" em verde embaixo. Sem cabeçalho de coluna,
      que no celular não fica em cima de coluna nenhuma. */
@media (max-width: 640px) {
  .compare-v2 { background: none !important; border: 0 !important; box-shadow: none !important; display: grid; gap: 12px; }
  .compare-v2 .compare-head { display: none !important; }
  .compare-v2 .compare-row { display: block; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(4,38,31,.1); box-shadow: 0 14px 30px -22px rgba(4,38,31,.45); }
  .compare-v2 .compare-row span { display: block; border: 0 !important; padding: 12px 16px 12px 44px !important; position: relative; }
  .compare-v2 .compare-row span:first-child { background: #f4f6f5; color: #6b7f78; font-size: 13.5px; text-decoration: line-through; text-decoration-color: rgba(4,38,31,.25); }
  .compare-v2 .compare-row span:first-child::before { content: "✕"; position: absolute; left: 16px; top: 12px; width: auto; color: #b3423b; text-decoration: none; }
  .compare-v2 .compare-row span:first-child::after { content: "Chatbot comum"; display: block; order: -1; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: #8a9b95; margin-top: 2px; }
  .compare-v2 .compare-row .is-us { background: #fff !important; border-left: 0 !important; font-size: 15px; color: var(--ink-0); }
  .compare-v2 .compare-row .is-us::before { content: "✓"; position: absolute; left: 16px; top: 12px; width: auto; color: #fff; background: var(--brand-emerald); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; }
  .compare-v2 .compare-row .is-us::after { content: "Byflows"; display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-emerald); font-weight: 700; margin-top: 3px; }
}
@media (max-width: 640px) {
  /* rótulo em cima do texto, e sem risco (o risco do texto passava para o rótulo) */
  /* rótulo absoluto em cima (flex quebrava o texto em pedaços a cada <b>) */
  .compare-v2 .compare-row span { display: block; padding-top: 30px !important; }
  .compare-v2 .compare-row span::after { position: absolute; left: 44px; top: 11px; margin: 0 !important; }
  .compare-v2 .compare-row span::before { top: 28px !important; }
  .compare-v2 .compare-row span:first-child { text-decoration: none; }
}

/* 2. Painel no celular: recorte 4:5 da tela real de desktop numa moldura de janela, no
      lugar da captura do app encolhido a 390px (que o dono achou feia e compacta). */
@media (max-width: 720px) {
  .telas-janela { max-width: none !important; margin: 0 !important; border-radius: 18px !important; }
  .telas-quadro { aspect-ratio: 4 / 5 !important; max-height: none !important; }
  .telas-quadro img { object-fit: cover; object-position: top left; }
}

/* 320–360px (Galaxy S9+, SE): o sobretítulo espaçado do hero passava da coluna. */
@media (max-width: 360px) {
  .eyebrow { letter-spacing: 0.12em; flex-wrap: wrap; white-space: normal; }
}