/* ==========================================================
   Fartechy — tokens e estilos
   Referência: resend.com (home). Ver design-system.md e bar.md.
   Preto puro; a cor (menta) mora só nos objetos, status e dados.
   ========================================================== */

:root {
  /* Cores */
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #111111;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f0f0f0;
  --muted: #a1a4a5;
  --faint: #6b6f70;
  --mint: #3ee6a0;
  --heading-gradient: linear-gradient(to right bottom, #fff 30%, rgba(255, 255, 255, 0.5));

  /* Tipografia */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-display: clamp(3.25rem, 1.9rem + 5.6vw, 6rem);      /* 52 → 96 */
  --text-section: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);    /* 36 → 56 */
  --text-title: 1.25rem;   /* 20 */
  --text-lead: 1.125rem;   /* 18 */
  --text-body: 1rem;       /* 16 */
  --text-card: 0.875rem;   /* 14 */
  --text-label: 0.8125rem; /* 13 */

  /* Espaço e layout */
  --section-pad: clamp(4rem, 2.6rem + 5.6vw, 6rem); /* 64 → 96 */
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 64px;

  /* Raios */
  --radius-btn: 12px;
  --radius-card: 20px;
  --radius-frame: 24px;
  --radius-tile: 36px;

  /* Movimento */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.45, 0, 0.55, 1); /* ease-in-out das entradas */
  --dur-ui: 180ms;
  --dur-enter: 1s;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

/* Ângulo animável para as bordas luminosas (conic-gradient) */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
main, .footer { overflow-x: clip; } /* nenhum brilho decorativo gera scroll horizontal */
ol, ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong, b { font-weight: 400; color: var(--text); }
::selection { background: rgba(255, 255, 255, 0.18); color: #fff; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 6px;
}

.icon { width: 18px; height: 18px; flex: none; display: inline-block; }
.icon--sm { width: 14px; height: 14px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 8px 16px; background: var(--text); color: var(--bg); border-radius: var(--radius-btn);
}
.skip-link:focus { top: 16px; }

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

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Tipografia: três vozes ---------- */
.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.section-title {
  font-size: var(--text-section);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.05em;
  background: var(--heading-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
  padding-bottom: 0.06em; /* evita cortar descendentes com background-clip */
}
.section-lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--muted);
  max-width: 640px;
  text-wrap: pretty;
}

/* ---------- Pontos de status (único uso de menta fora dos objetos) ---------- */
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(62, 230, 160, 0.7);
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #4a4d4e; display: inline-block; }
.dot--mint { background: var(--mint); box-shadow: 0 0 8px rgba(62, 230, 160, 0.5); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: var(--radius-btn);
  font-size: 0.875rem; font-weight: 500; line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
}
.btn--primary {
  background: var(--text);
  color: #000;
  border: 1px solid var(--text);
}
.btn--primary:hover { background: #fff; border-color: #fff; }
.btn--primary:active { transform: translateY(1px); }
.btn--primary .icon--wa { color: #0b0b0b; }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.02); }
.btn--ghost .icon { transition: transform var(--dur-ui) var(--ease-ui); }
.btn--ghost:hover .icon--sm { transform: translateX(2px); }
.btn--ghost:hover { background: var(--surface-2); border-color: rgba(255, 255, 255, 0.24); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 0.8125rem; }
.btn--sm .icon { width: 16px; height: 16px; }
.btn--lg { height: 52px; padding: 0 24px; font-size: 0.9375rem; }

.link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-card); font-weight: 400; color: var(--text);
  transition: color var(--dur-ui) var(--ease-ui), gap var(--dur-ui) var(--ease-ui);
}
.link:hover { gap: 8px; color: #fff; }

/* ---------- Navegação ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.site-nav.is-scrolled { border-bottom-color: var(--line); }
.site-nav__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand__mark {
  width: 22px; height: 22px; border-radius: 7px; position: relative;
  background: linear-gradient(145deg, #f4f4f4, #8d9091);
}
.brand__mark::before, .brand__mark::after {
  content: ""; position: absolute; background: #000; border-radius: 1px;
}
/* "F" vazado na marca */
.brand__mark::before { left: 7px; top: 5px; width: 9px; height: 2.5px; box-shadow: 0 5px 0 -0.2px #000; }
.brand__mark::after { left: 7px; top: 5px; width: 2.5px; height: 12px; }
.brand__word { font-size: 1.125rem; font-weight: 400; letter-spacing: -0.04em; }
.site-nav__links { display: flex; gap: 4px; margin-inline: auto; }
.site-nav__links a {
  font-size: 0.875rem; color: var(--muted);
  padding: 6px 12px; border-radius: 8px;
  transition: color var(--dur-ui) var(--ease-ui), background-color var(--dur-ui) var(--ease-ui);
}
.site-nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.site-nav__links a[aria-current="true"] { color: var(--text); }
@media (max-width: 860px) {
  .site-nav__links { display: none; }
  .site-nav__inner { justify-content: space-between; }
}

/* ---------- Seções ---------- */
.section { padding-block: var(--section-pad); position: relative; }
.section-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 20px; margin-bottom: clamp(40px, 5vw, 64px);
}
.section-head .section-lead { margin-top: -4px; }
.section-head--plain { gap: 16px; }

/* Tile 3D em vídeo (abre as seções de produto) */
.tile3d {
  width: 170px; height: 170px; flex: none;
  border-radius: var(--radius-tile);
  overflow: hidden; position: relative;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 30% 20%, #151515, #000 70%);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
}
.tile3d video { width: 100%; height: 100%; object-fit: cover; }
.tile3d::after { /* brilho de vidro na borda superior */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%);
}

/* Borda luminosa que gira devagar (conic-gradient, 30s) */
.glow-border, .stage, .flow, .metrics, .ticker__frame, .app-frame, .browser {
  --glow-color: rgba(255, 255, 255, 0.55);
}
.stage::before, .flow::before, .metrics::before, .app-frame::before, .browser::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0deg, transparent 250deg, var(--glow-color) 300deg, transparent 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin-angle 30s linear infinite;
  z-index: 2;
}
@keyframes spin-angle { to { --angle: 360deg; } }

/* ==========================================================
   (a) HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: min(calc(100svh - var(--nav-h)), 860px);
  display: flex; align-items: center;
  padding-block: 72px 96px;
  isolation: isolate;
  overflow: clip;
}
/* atmosfera: luz vinda de cima à direita + feixe diagonal fino que deriva devagar (24s).
   O invólucro some no preto antes da borda da seção, então não há linha de corte. */
.hero__atmos {
  position: absolute; z-index: -2; inset: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(55% 70% at 80% 0%, rgba(255, 255, 255, 0.07), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 98%);
}
.hero__beam {
  position: absolute; pointer-events: none;
  left: -25%; right: -25%; top: 66%; height: 150px;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.05) 35%, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.04) 75%, transparent 95%);
  border-radius: 50%;
  transform: rotate(-11deg);
  filter: blur(28px);
  animation: beam-drift 24s var(--ease-enter) infinite alternate;
}
@keyframes beam-drift {
  from { transform: translate3d(-5%, 0, 0) rotate(-11deg); opacity: 0.75; }
  to { transform: translate3d(5%, -24px, 0) rotate(-9deg); opacity: 1; }
}
.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-width: min(640px, 52%); display: flex; flex-direction: column; align-items: flex-start; }
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--text-label); color: var(--text);
  margin-bottom: 28px;
}
.hero .display { font-size: var(--text-display); max-width: 11.5ch; }
.hero__lead {
  margin-top: 28px;
  font-size: var(--text-lead); line-height: 1.6;
  color: var(--muted); max-width: 30rem;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }

/* Objeto 3D do hero: vídeo de 1280×720. A máscara elíptica (centro 56% × 52%) tem raios
   menores que a distância até qualquer borda do quadro: nenhum cubo que se solta
   no loop chega a uma borda reta, tudo termina em fade. */
.hero__media {
  --vw: min(57vw, 860px);
  position: absolute; z-index: 0;
  top: 50%;
  left: calc(50% + clamp(220px, 23.6vw, 380px) - 0.56 * var(--vw));
  width: var(--vw);
  aspect-ratio: 16 / 9;
  transform: translateY(-48%);
  pointer-events: none;
}
/* glow radial (≤ 12%) atrás do objeto */
.hero__glow {
  position: absolute; left: 56%; top: 52%; width: 90%; height: 110%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(62, 230, 160, 0.09), rgba(62, 230, 160, 0.03) 45%, transparent 75%),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent 85%);
  filter: blur(16px);
}
.hero__video {
  position: relative;
  width: 100%; height: 100%; object-fit: cover;
  /* gradação: faces mais escuras e densas, menta preservada */
  filter: brightness(0.75) contrast(1.15) saturate(0.9);
  -webkit-mask-image: radial-gradient(ellipse 43% 45% at 56% 52%, #000 46%, rgba(0, 0, 0, 0.85) 62%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 43% 45% at 56% 52%, #000 46%, rgba(0, 0, 0, 0.85) 62%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
}

@media (min-width: 961px) and (max-width: 1180px) {
  /* telas médias: objeto menor e mais à direita para não encostar no título */
  .hero__media { --vw: 48vw; left: calc(50% + 27vw - 0.56 * var(--vw)); }
}
@media (max-width: 960px) {
  .hero { flex-direction: column; align-items: stretch; padding-block: 48px 24px; min-height: 0; }
  .hero__copy { max-width: 100%; }
  .hero .display { max-width: 13ch; }
  .hero__media {
    --vw: min(104vw, 760px);
    position: relative; top: auto; left: 50%;
    transform: translateX(-56%);
    margin-top: -4%;
    margin-bottom: 0; /* sem margem negativa: o overflow do hero não pode cortar o vídeo */
  }
}

/* Coreografia de entrada (~1s, em sequência): header desce → texto sobe → objeto cresce */
@media (prefers-reduced-motion: no-preference) {
  .site-nav { animation: enter-down var(--dur-enter) var(--ease-enter) both; }
  .hero__copy > * { animation: enter-up var(--dur-enter) var(--ease-enter) both; }
  .hero__copy > :nth-child(1) { animation-delay: 0.25s; }
  .hero__copy > :nth-child(2) { animation-delay: 0.35s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.45s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.55s; }
  .hero__video { transform-origin: 56% 52%; animation: enter-grow var(--dur-enter) var(--ease-enter) 0.7s both; }
  .hero__glow { animation: beam-in 1.4s var(--ease-enter) 0.8s both; }
  .hero__beam { animation: beam-in 1.6s var(--ease-enter) 0.4s both, beam-drift 24s var(--ease-enter) 2s infinite alternate; }
}
@keyframes enter-down { from { opacity: 0; transform: translateY(-16px); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes enter-grow { from { opacity: 0; transform: scale(0.7); } }
@keyframes beam-in { from { opacity: 0; } }

/* ---------- Faixa contínua (no lugar da faixa de logos) ---------- */
.ticker { padding-block: 24px var(--section-pad); }
.ticker__frame {
  position: relative;
  border-radius: 32px 32px 0 0;
  padding: clamp(56px, 7vw, 88px) 0 8px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
/* linha de luz no topo da moldura, como no resend */
.ticker__frame::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: min(520px, 70%); height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}
.ticker__frame::after {
  content: ""; position: absolute; top: 0; left: 50%; width: min(520px, 80%); height: 120px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, 0.07), transparent);
}
.ticker__title {
  text-align: center; font-size: var(--text-lead); color: var(--muted);
  max-width: 640px; margin: 0 auto 48px; padding-inline: 16px; text-wrap: balance;
}
@media (max-width: 720px) { .br-desk { display: none; } }
.marquee {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.marquee + .marquee { margin-top: 28px; }
.marquee__track {
  display: flex; flex: none; gap: 56px; padding-right: 56px;
  animation: marquee 90s linear infinite;
}
.marquee--reverse .marquee__track { animation-duration: 110s; animation-direction: reverse; }
.marquee__track li {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 1.375rem; letter-spacing: -0.02em; color: #d6d8d9; white-space: nowrap;
}
.marquee--reverse .marquee__track li { color: var(--faint); }
.marquee__track .icon { width: 24px; height: 24px; opacity: 0.85; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ==========================================================
   (b) SERVIÇOS
   ========================================================== */
.stage {
  position: relative;
  border-radius: var(--radius-frame);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(180deg, #070707, #000 70%);
  overflow: hidden;
  margin-bottom: 24px;
}
.stage__glow {
  position: absolute; left: 50%; top: 38%; width: 60%; height: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(62, 230, 160, 0.08), transparent 70%);
  filter: blur(20px);
}
.stage__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.stage__dots { display: inline-flex; gap: 6px; }
.stage__dots i { width: 10px; height: 10px; border-radius: 50%; background: #262829; }
.stage__tab {
  font-size: var(--text-label); color: var(--text);
  padding: 5px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
/* recorta o preto ao redor do notebook para a tela ficar grande e legível */
.stage__crop {
  position: relative; z-index: 1;
  overflow: hidden;
  /* o chão cinza da foto some no preto, sem linha de corte */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  aspect-ratio: 1 / 0.6;
  max-width: 1200px; margin-inline: auto;
}
.stage__crop .mock--laptop {
  width: 142%;
  margin-left: -21%;
  margin-top: -8.5%;
}
.stage__hint { display: none; text-align: center; font-size: 0.75rem; color: var(--faint); padding: 0 16px 16px; }
@media (max-width: 720px) {
  /* no celular: só a tela do painel, em escala legível, com rolagem lateral */
  .stage__crop {
    aspect-ratio: auto; overflow-x: auto; padding: 16px;
    -webkit-mask-image: none; mask-image: none;
    scrollbar-width: thin; scrollbar-color: #2a2c2d transparent;
  }
  .stage__crop .mock--laptop { width: 820px; margin: 0; }
  .stage__crop .mock--laptop > img { display: none; }
  .stage__crop .mock--laptop .mock__screen {
    position: relative; left: 0; top: 0; width: 820px; height: 537px;
    border-radius: 12px; border: 1px solid var(--line);
  }
  .stage__hint { display: block; }
}

/* Bloco de produto: uma ideia por tela */
.product__cta { display: flex; justify-content: center; margin-top: 32px; }

/* Software: recursos em três colunas abaixo do quadro (ícone 16px, título 20px, texto 14px) */
.features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  margin-top: clamp(40px, 5vw, 64px); padding-inline: clamp(0px, 2vw, 28px);
}
.feature__icon { width: 16px; height: 16px; color: var(--text); }
.feature__title { margin-top: 16px; font-size: var(--text-title); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.feature p, .feature-list p { margin-top: 8px; font-size: var(--text-card); line-height: 1.6; color: var(--muted); max-width: 34ch; }
@media (max-width: 760px) { .features { grid-template-columns: 1fr; gap: 32px; } }
#svc-software { padding-bottom: clamp(24px, 3vw, 40px); }

/* SaaS: o notebook solto no preto (uma moldura só: o próprio aparelho), maior que o
   container e sumindo no fundo por todos os lados; atrás dele, só um glow radial ≤ 12% */
.stage--bleed {
  width: 100vw; margin-inline: calc(50% - 50vw);
  border: 0; border-radius: 0; background: none; overflow: visible;
}
.stage--bleed::before { display: none; }
.stage--bleed .stage__glow {
  top: 56%; width: min(1000px, 80%); height: 80%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(62, 230, 160, 0.1), rgba(62, 230, 160, 0.03) 55%, transparent 75%);
  filter: blur(24px);
}
.stage__label { position: relative; z-index: 1; display: flex; justify-content: center; margin-bottom: 4px; }
.stage__label .sim-tag { margin-left: 0; white-space: normal; text-align: center; }
.stage--bleed .stage__crop { max-width: 1240px; }
@media (min-width: 721px) {
  /* a foto do notebook some no preto pelo topo, pelas laterais e pela base: sem caixa visível */
  .stage--bleed .stage__crop {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 80%, transparent 100%), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 80%, transparent 100%), linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-composite: intersect;
  }
}
.modules {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin-top: 32px;
}
.modules li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 24px; font-size: var(--text-card); color: var(--muted);
}
.modules li + li { border-left: 1px solid var(--line); }
.modules .icon { width: 16px; height: 16px; color: var(--text); }
@media (max-width: 720px) {
  /* no celular o painel respeita o gutter; a rolagem lateral é avisada pela legenda */
  .stage--bleed { width: auto; margin-inline: 0; }
  .stage--bleed .stage__crop { padding: 12px 0 16px; }
  .stage__hint { padding-inline: 0; }
  .modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 24px; }
  .modules li { padding: 0; }
  .modules li + li { border-left: 0; }
}

/* Sites: navegador e coluna lateral com recursos em lista (layout dividido) */
.sites-split { position: relative; }
.sites-split::before {
  content: ""; position: absolute; left: 4%; top: 6%; width: 62%; height: 80%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(62, 230, 160, 0.1), transparent 70%);
  filter: blur(30px);
}
.sites-split {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center;
  gap: clamp(32px, 4vw, 56px);
}
.feature-list { display: grid; }
.feature-list li { padding-block: 22px; border-top: 1px solid var(--line); }
.feature-list li:first-child { padding-top: 0; border-top: 0; }
.feature-list .feature__title { margin-top: 12px; font-size: 1.0625rem; }
.sites-split__cta { margin-top: 12px; }
@media (max-width: 960px) {
  .sites-split { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .feature-list li, .feature-list li:first-child { padding: 0; border: 0; }
}
@media (max-width: 640px) {
  .feature-list { grid-template-columns: 1fr; gap: 0; }
  .feature-list li { padding-block: 18px; border-top: 1px solid var(--line); }
  .feature-list li:first-child { padding: 0 0 18px; border-top: 0; }
  .sites-split__cta { width: 100%; }
}

/* Moldura de app (sistema interno e painel de conexões) */
.app-frame, .browser {
  position: relative;
  border-radius: var(--radius-frame);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0a0a, #050505);
  overflow: hidden;
}
.app-frame__bar, .browser__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.app-frame__dots { display: inline-flex; gap: 6px; flex: none; }
.app-frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: #262829; }
.app-frame__title { font-size: var(--text-label); color: var(--text); }
/* rótulo de simulação: sempre visível; no celular desce para a própria linha da barra */
.app-frame__meta, .stage__meta, .sim-tag {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 0.75rem; line-height: 1.4; color: var(--muted); white-space: nowrap;
}
@media (max-width: 720px) {
  .app-frame__bar, .browser__bar, .stage__bar { flex-wrap: wrap; row-gap: 10px; }
  .app-frame__bar .app-frame__meta, .browser__bar .app-frame__meta, .stage__meta { order: 3; margin-left: 0; }
}

/* Luz das molduras de serviço: clarão de cima + glow de menta vindo do objeto principal */
.frame-light {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 40% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    radial-gradient(30% 40% at var(--lx, 38%) var(--ly, 42%), rgba(62, 230, 160, 0.09), transparent 70%);
}
.app-frame > :not(.frame-light), .browser > :not(.frame-light) { position: relative; z-index: 1; }
/* realce de 1px no topo da moldura */
.app-frame::after, .browser::after {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
/* a base do quadro e do navegador afunda no preto, como as telas do resend */
.app-frame--lit, .browser {
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.app-frame--lit { background: linear-gradient(180deg, #0c0c0c, #030303 80%); }
@media (max-width: 720px) {
  /* no celular o aviso e o toast ficam na base do quadro: sem máscara nele */
  .app-frame--lit { -webkit-mask-image: none; mask-image: none; }
}

/* Software sob medida: quadro de ordens de serviço */
.os { position: relative; padding: 20px; }
.os__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.os__search {
  flex: 0 1 300px; display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #070707;
  font-size: var(--text-label); color: var(--faint);
}
.os__filters { display: flex; gap: 4px; }
.os__filters span { font-size: var(--text-label); color: var(--muted); padding: 6px 10px; border-radius: 8px; }
.os__filters .is-on { background: #161616; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.os__new { margin-left: auto; font-size: var(--text-label); color: var(--text); background: #161616; border: 1px solid var(--line-strong); padding: 7px 12px; border-radius: 10px; }
.os__board {
  display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 14px;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2a2c2d transparent;
}
.os__col {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.015);
  min-height: 380px;
}
.os__colhead { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; font-size: var(--text-label); color: var(--muted); }
.os__colhead span { font-size: 0.75rem; color: var(--faint); background: #151515; border-radius: 999px; padding: 1px 8px; }
.os-card {
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: #0e0e0e;
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.os-card:hover { border-color: rgba(255, 255, 255, 0.26); }
.os-card__id { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--faint); }
.os-card__title { margin-top: 4px; font-size: var(--text-card); line-height: 1.35; color: var(--text); }
.os-card__meta { font-size: var(--text-label); color: var(--muted); }
.os-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.75rem; color: var(--faint); }
.os-card--ghost { opacity: 0.55; border-style: dashed; }
.os-card--live { border-color: rgba(255, 255, 255, 0.3); background: #121212; }
.os-card--done .icon { color: var(--mint); }
.os-card__progress { height: 3px; margin-top: 10px; border-radius: 3px; background: #1d1d1d; overflow: hidden; }
.os-card__progress i { display: block; height: 100%; width: 64%; border-radius: 3px; background: linear-gradient(90deg, #1f6e4f, var(--mint)); animation: os-progress 16s var(--ease-enter) infinite alternate; }
@keyframes os-progress { from { width: 34%; } to { width: 86%; } }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a); color: #d0d0d0; font-size: 0.625rem;
}
.tag { font-size: 0.71875rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.os__toast {
  position: absolute; right: 28px; bottom: 96px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: #141414;
  font-size: var(--text-label); color: var(--text);
  animation: toast 14s var(--ease-enter) infinite;
}
.os__toast .icon { color: var(--mint); }
@keyframes toast {
  0%, 14% { opacity: 0; transform: translateY(12px); }
  22%, 72% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateY(12px); }
}
@media (max-width: 720px) {
  .os { padding: 14px; }
  .os__filters { display: none; }
  .os__board { grid-template-columns: repeat(4, 82%); scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-bottom: 6px; }
  .os__col { scroll-snap-align: start; min-height: 0; }
  .os__toast { position: static; margin-top: 12px; }
  .os__hint { display: block; padding: 10px 0 0; }
}

/* Landing pages: janela de navegador com o site de um cliente fictício */
.browser { border-color: var(--line-strong); min-width: 0; --lx: 50%; --ly: 0%; }
.browser__bar { padding: 12px 16px; background: #0c0c0c; }
.browser__url {
  flex: 0 1 420px; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 30px; border-radius: 8px; background: #151515;
  font-size: var(--text-label); color: var(--muted);
}
.browser__bar .app-frame__meta { margin-left: 0; }
.browser__view { position: relative; height: 580px; overflow: hidden; background: #f4f3f0; container-type: inline-size; }
/* rolagem lenta da página dentro da janela (ambiente, 28s ida e volta) */
.site { color: #151515; animation: site-scroll 28s var(--ease-enter) infinite alternate; }
@keyframes site-scroll {
  0%, 22% { transform: translateY(0); }
  78%, 100% { transform: translateY(calc(-100% + 580px)); }
}
.site__nav { display: flex; align-items: center; gap: 24px; padding: 18px 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.site__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; letter-spacing: -0.02em; }
.site__logo i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #8a8e8f, #151515); }
.site__links { display: flex; gap: 22px; margin-left: auto; font-size: var(--text-card); color: #55595a; }
.site__btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 8px; background: #2b2f2d; color: #fff; font-size: var(--text-label); white-space: nowrap; pointer-events: none; cursor: default; user-select: none; }
.site__btn--sm { height: 34px; padding: 0 14px; font-size: var(--text-label); }
.site__btn--line { background: transparent; color: #151515; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.site__hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 64px 40px 56px; }
.site__hero-copy { position: relative; }
.site__eyebrow { font-size: var(--text-label); color: #6b6f70; }
.site__h1 { margin-top: 10px; font-family: var(--font-display); font-variation-settings: "opsz" 144; font-size: clamp(2.125rem, 5.6cqi, 3.25rem); line-height: 1.02; letter-spacing: -0.01em; color: #111; }
.site__lead { margin-top: 16px; max-width: 30em; font-size: 1rem; color: #55595a; }
.site__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.site__cursor { position: absolute; left: 150px; bottom: -14px; width: 22px; height: 22px; animation: cursor 14s var(--ease-enter) infinite; }
.site__cursor svg { width: 100%; height: 100%; }
@keyframes cursor {
  0% { opacity: 0; transform: translate(220px, 70px); }
  12% { opacity: 1; }
  32% { transform: translate(0, 0) scale(1); }
  36% { transform: translate(0, 0) scale(0.82); }
  40%, 70% { opacity: 1; transform: translate(0, 0) scale(1); }
  82%, 100% { opacity: 0; transform: translate(0, 0); }
}
.site__visual { position: relative; height: 300px; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #e7e5e0, #d3d1cb); }
.site__visual::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -15%; top: -25%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), transparent); }
.site__card { position: absolute; left: 24px; bottom: 24px; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); }
.site__card--b { left: auto; bottom: auto; right: 24px; top: 24px; }
.site__card-k { font-size: 0.75rem; color: #6b6f70; }
.site__card-v { font-size: 1.0625rem; color: #111; letter-spacing: -0.01em; }
.site__card-s { font-size: 0.78125rem; color: #55595a; }
.site__section { padding: 48px 40px; border-top: 1px solid rgba(0, 0, 0, 0.07); }
.site__h2 { font-size: 1.625rem; letter-spacing: -0.03em; color: #111; }
.site__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.site__grid div { display: grid; gap: 6px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); }
.site__grid b { font-weight: 400; font-size: 1rem; color: #111; }
.site__grid span { font-size: var(--text-label); color: #6b6f70; }
.site__section--split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.site__p { margin-top: 10px; font-size: 0.9375rem; color: #55595a; }
/* agenda online da clínica fictícia (substitui o mapa) */
.site__agenda { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); }
.site__agenda-head { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; color: #6b6f70; }
.site__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.site__days span { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.08); font-size: 0.71875rem; color: #6b6f70; }
.site__days b { font-weight: 400; font-size: 1rem; color: #111; }
.site__days .is-on { background: #151515; border-color: #151515; color: #b9b9b9; }
.site__days .is-on b { color: #fff; }
.site__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.site__slots span { text-align: center; padding: 8px 0; border-radius: 9px; border: 1px solid rgba(0, 0, 0, 0.1); font-size: var(--text-label); color: #111; }
.site__slots .is-on { background: #151515; border-color: #151515; color: #fff; }
.site__slots .is-off { color: #a9abab; border-style: dashed; text-decoration: line-through; }
.site__btn--block { justify-content: center; width: 100%; }
.site__days .is-on, .site__slots .is-on { background: #2b2f2d; border-color: #2b2f2d; }
.site__footer { display: flex; justify-content: space-between; align-items: center; padding: 22px 40px; background: #151515; color: #e8e8e8; font-size: var(--text-card); }
.site__footer-links { display: inline-flex; gap: 18px; color: #9a9c9c; font-size: var(--text-label); }
@container (max-width: 640px) {
  .site__links { display: none; }
  .site__nav { padding: 14px 18px; gap: 12px; }
  .site__nav .site__btn--sm { margin-left: auto; }
  .site__hero { grid-template-columns: 1fr; gap: 24px; padding: 32px 18px; }
  .site__h1 { font-size: 2.125rem; }
  .site__visual { height: 170px; }
  .site__section { padding: 28px 18px; }
  .site__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .site__section--split { grid-template-columns: 1fr; gap: 16px; }
  .site__footer { padding: 18px; }
  .site__cursor, .site__card--b { display: none; }
}
@media (max-width: 720px) {
  .browser__view { height: 520px; }
  @keyframes site-scroll { 0%, 22% { transform: translateY(0); } 78%, 100% { transform: translateY(calc(-100% + 520px)); } }
}

/* Ponte para as demonstrações de bot e insights */
.bridge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: var(--section-pad); }
.bridge__card {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: var(--radius-card);
  border: 1px solid var(--line); background: linear-gradient(180deg, #0a0a0a, #050505);
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.bridge__card:hover { border-color: rgba(255, 255, 255, 0.2); }
.bridge__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-strong); background: #0f0f0f; color: var(--text); }
.bridge__text { display: grid; gap: 4px; }
.bridge__title { font-size: 1.0625rem; color: var(--text); letter-spacing: -0.01em; }
.bridge__sub { font-size: var(--text-card); color: var(--muted); }
.bridge__arrow { margin-left: auto; color: var(--faint); transform: rotate(90deg); transition: transform var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui); }
.bridge__card:hover .bridge__arrow { color: var(--text); transform: rotate(90deg) translateX(3px); }
@media (max-width: 760px) { .bridge { grid-template-columns: 1fr; gap: 12px; } }

.ticks { display: grid; gap: 8px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-card); color: #c9cbcc; }
.ticks .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--faint); }
.ticks--lg li { font-size: var(--text-body); }
.ticks--lg .icon { margin-top: 5px; }

/* ==========================================================
   (c) DEMONSTRAÇÕES
   ========================================================== */
/* Fluxo do bot: um produto rodando. Nós com saída e estado (aguardando →
   executando → concluído), fios que acendem em menta conforme o dado passa,
   e um log de execução que se escreve a cada passo. */
.flow {
  position: relative;
  border-radius: var(--radius-frame);
  border: 1px solid var(--line);
  background: #030303;
  overflow: hidden;
}
.flow__head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: var(--text-label);
}
.flow__name { display: inline-flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.flow__name .icon { width: 16px; height: 16px; color: var(--faint); }
.flow__run { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow__run b { font-weight: 400; color: var(--muted); }
.flow__live {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(62, 230, 160, 0.28);
}
.flow__canvas {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}
.flow__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow__wires .wire { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.25; transition: stroke 400ms var(--ease-ui); }
.flow__wires .wire.is-lit { stroke: rgba(62, 230, 160, 0.3); }
/* tracejado que anda devagar nos fios já percorridos (cerca de 10px/s) */
.flow__wires .wire-flow { fill: none; stroke: transparent; stroke-width: 1.5; stroke-dasharray: 2 10; transition: stroke 400ms var(--ease-ui); }
.flow__wires .wire-flow.is-lit { stroke: rgba(62, 230, 160, 0.75); animation: wire-flow 2.4s linear infinite; }
@keyframes wire-flow { to { stroke-dashoffset: -24; } }
.flow__wires .wire-pulse {
  fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(62, 230, 160, 0.9));
  opacity: 0;
}
.flow__nodes {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 56px); row-gap: 40px;
}
.flow-node {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: #0b0b0b;
  transition: border-color 400ms var(--ease-ui), background-color 400ms var(--ease-ui), box-shadow 400ms var(--ease-ui);
}
#n5 { grid-column: 3; grid-row: 2; align-self: start; }
.flow-node__top { display: flex; align-items: center; gap: 12px; }
.flow-node__icon {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #161616, #0b0b0b);
  color: var(--text);
}
.flow-node__icon .icon { width: 18px; height: 18px; }
.flow-node__text { display: flex; flex-direction: column; min-width: 0; }
.flow-node__title { font-size: var(--text-card); color: var(--text); line-height: 1.3; }
.flow-node__meta { font-size: 0.75rem; color: var(--faint); }
/* saída do nó: o que o passo produziu */
.flow-node__out {
  min-height: 60px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #060606;
  font-size: 0.78125rem; line-height: 1.55; color: #c9cbcc; font-variant-numeric: tabular-nums;
  transition: opacity 400ms var(--ease-ui);
}
.flow-node__out .kv { display: inline-block; min-width: 4.8em; color: var(--faint); }
.flow-node__state { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--faint); }
.flow-node__state i {
  width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid #3a3d3e;
  transition: background-color 400ms var(--ease-ui), border-color 400ms var(--ease-ui);
}
/* aguardando: apagado */
.flow-node:not(.is-running):not(.is-done) .flow-node__out { opacity: 0.35; }
/* executando: borda menta e anel girando */
.flow-node.is-running { border-color: rgba(62, 230, 160, 0.45); background: #0e0e0e; box-shadow: 0 0 0 4px rgba(62, 230, 160, 0.05); }
.flow-node.is-running .flow-node__state { color: var(--text); }
.flow-node.is-running .flow-node__state i { border-color: rgba(255, 255, 255, 0.16); border-top-color: var(--mint); animation: spin 1.4s linear infinite; }
/* concluído: ponto menta */
.flow-node.is-done .flow-node__state { color: var(--muted); }
.flow-node.is-done .flow-node__state i { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 8px rgba(62, 230, 160, 0.6); }

/* Log de execução */
/* painel do log na segunda linha do canvas, embaixo dos dois primeiros nós */
.flow__console {
  grid-column: 1 / span 2; grid-row: 2; align-self: start;
  padding: 12px 16px 6px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(5, 5, 5, 0.92);
}
.flow__console-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-label); color: var(--muted); margin-bottom: 6px; }
.flow__console-title span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.75rem; white-space: nowrap; }
.flow__log li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 6px 0; border-top: 1px solid var(--line);
  font-size: 0.78125rem; color: var(--text); font-variant-numeric: tabular-nums;
  transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter);
}
.flow__log li:first-child { border-top: 0; }
.flow__log time { color: var(--faint); }
.flow__log-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.flow__log-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(62, 230, 160, 0.6); }
.flow__log li.is-pending { opacity: 0.28; }
.flow__log li.is-pending .flow__log-ok::before { background: #3a3d3e; box-shadow: none; }

@media (max-width: 900px) {
  .flow__wires { display: none; }
  .flow__run { display: none; }
  .flow__live { margin-left: auto; }
  .flow__canvas { padding: 20px 16px; }
  .flow__nodes { grid-template-columns: 1fr; row-gap: 20px; max-width: 440px; margin-inline: auto; }
  #n5 { grid-column: auto; grid-row: auto; }
  /* trilho vertical entre os nós: acende em menta quando o dado chega */
  .flow-node + .flow-node::before {
    content: ""; position: absolute; left: 31px; top: -21px; width: 2px; height: 20px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    transition: background-color 400ms var(--ease-ui), box-shadow 400ms var(--ease-ui);
  }
  .flow-node.is-done + .flow-node::before, .flow-node.is-done + .flow-node.is-running::before { background: var(--mint); box-shadow: 0 0 8px rgba(62, 230, 160, 0.6); }
  .flow-node__out { min-height: 0; }
  .flow__console { grid-column: auto; grid-row: auto; margin-top: 4px; padding: 12px 14px 6px; }
  .flow__log li { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
}


/* Divisão: texto + celular */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(64px, 8vw, 112px);
}
.split__title {
  font-size: var(--text-section);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.05em; text-wrap: balance;
  background: var(--heading-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
.split__lead { margin-top: 18px; font-size: var(--text-lead); color: var(--muted); max-width: 34rem; }
.split .ticks { margin-top: 28px; }
.split__cta { margin-top: 36px; }
/* canais atendidos: fecha a coluna de texto na altura do celular */
.channels { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 34rem; }
.channels__label { font-size: var(--text-label); color: var(--faint); letter-spacing: 0.02em; }
.channels__list { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 14px; }
.channels__list li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-card); color: var(--text); }
.channels__list .icon { width: 16px; height: 16px; color: var(--muted); }
.phone-stage { position: relative; justify-self: center; width: min(100%, 440px); }
.phone-stage__halo {
  position: absolute; inset: 10% -10%; pointer-events: none;
  background: radial-gradient(45% 45% at 50% 50%, rgba(62, 230, 160, 0.1), transparent 70%);
  filter: blur(10px);
}
/* recorta o preto em volta do celular para ampliar a tela */
.phone-stage__crop { position: relative; overflow: hidden; aspect-ratio: 1 / 1.62; }
.phone-stage__crop .mock--phone { width: 180%; margin-left: -40%; margin-top: -36%; }
.phone-stage__caption { margin-top: 8px; text-align: center; font-size: 0.75rem; color: var(--faint); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .phone-stage { width: min(100%, 400px); }
  .phone-stage__halo { inset: 10% 0; }
}

/* Insights: cards de facetas + painel "Metrics" */
.facets {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-bottom: 24px;
}
.facet {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; border-radius: var(--radius-card);
  border: 1px solid var(--line); background: linear-gradient(180deg, #0a0a0a, #050505);
  font-size: var(--text-body); color: var(--text); letter-spacing: -0.01em;
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.facet:hover { border-color: rgba(255, 255, 255, 0.18); }
.facet__icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: #0f0f0f; color: var(--text);
}
@media (max-width: 860px) { .facets { grid-template-columns: 1fr; gap: 12px; } }

.metrics {
  position: relative;
  border-radius: var(--radius-frame);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #080808, #020202);
  overflow: hidden;
}
.metrics__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  font-size: var(--text-label);
}
.metrics__title { color: var(--text); font-size: var(--text-body); }
.metrics__tag { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 0.75rem; }
.metrics__range { margin-left: auto; color: var(--muted); padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); }
.metrics__body { padding: clamp(16px, 3vw, 32px); display: grid; gap: 20px; }
.metric-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.metric {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.015);
  padding: 22px 22px 8px;
  min-width: 0;
}
.metric__label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.metric__value {
  margin-top: 8px; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.15;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.metric__value--sm { font-size: 1.75rem; }
.metric__value span { font-size: var(--text-label); color: var(--faint); letter-spacing: 0; margin-left: 6px; }
.metric__rows { margin-top: 18px; }
.metric__rows p {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: var(--text-card); color: var(--text);
}
.metric__n { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.metric__p { width: 3.2em; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.metric-charts { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 20px; }
.metric--chart, .metric--hours { padding-bottom: 20px; }
.metric__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.metric__trend { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--muted); padding-top: 2px; }
.linechart { position: relative; margin-top: 20px; height: 220px; padding-right: 36px; }
.linechart svg { width: 100%; height: 100%; overflow: visible; display: block; }
.linechart__grid line { stroke: rgba(255, 255, 255, 0.06); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.linechart__line {
  fill: none; stroke: var(--mint); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(62, 230, 160, 0.45));
}
.linechart__dot {
  position: absolute; right: 36px; top: calc(44 / 260 * 100%);
  width: 10px; height: 10px; margin: -5px -5px 0 0; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 12px rgba(62, 230, 160, 0.9);
}
/* anel lento ao redor do último ponto (ambiente, 8s) */
.linechart__dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(62, 230, 160, 0.6);
  animation: ring 8s var(--ease-enter) infinite;
}
@keyframes ring { 0% { transform: scale(0.6); opacity: 0.9; } 40%, 100% { transform: scale(2.4); opacity: 0; } }
.linechart__y {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  font-size: 0.6875rem; color: var(--faint); text-align: right;
}
.linechart__x { display: flex; justify-content: space-between; padding: 10px 36px 0 0; font-size: 0.6875rem; color: var(--faint); }
/* desenho do gráfico ao entrar na tela (insights.js arma e dispara) */
.metrics.is-armed .linechart__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.metrics.is-armed .linechart__area, .metrics.is-armed .linechart__dot { opacity: 0; }
.metrics.is-live .linechart__line { transition: stroke-dashoffset 2.2s var(--ease-enter) 0.2s; stroke-dashoffset: 0; }
.metrics.is-live .linechart__area, .metrics.is-live .linechart__dot { transition: opacity 1s var(--ease-ui) 1.8s; opacity: 1; }

.bars {
  margin-top: 20px; height: 148px;
  display: flex; align-items: flex-end; gap: 3px;
}
.bars i {
  flex: 1; height: var(--h); min-height: 3px; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, #3a3d3e, #1c1e1f);
  transform-origin: bottom;
}
.bars i.is-peak { background: linear-gradient(180deg, var(--mint), rgba(62, 230, 160, 0.25)); box-shadow: 0 0 14px rgba(62, 230, 160, 0.35); }
.metrics.is-armed .bars i { transform: scaleY(0); }
.metrics.is-live .bars i { transform: none; transition: transform 1s var(--ease-enter); }
.metrics.is-live .bars i:nth-child(3n) { transition-delay: 0.1s; }
.metrics.is-live .bars i:nth-child(3n + 1) { transition-delay: 0.2s; }
.bars__x { display: flex; justify-content: space-between; padding-top: 10px; font-size: 0.6875rem; color: var(--faint); }
.metric__topics { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--text-card); color: var(--muted); }
.metrics__note { text-align: center; font-size: 0.75rem; color: var(--faint); }
@media (max-width: 960px) {
  .metric-cards { grid-template-columns: 1fr; gap: 12px; }
  .metric-charts { grid-template-columns: 1fr; gap: 12px; }
  .metrics__range { margin-left: 0; }
  .linechart { height: 180px; }
}

/* ==========================================================
   (d) FECHAMENTO
   ========================================================== */
/* Integrações: painel "Conexões" com status e atividade ao vivo */
.conn__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.conn__list { border-right: 1px solid var(--line); }
.conn__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; font-size: var(--text-label); color: var(--muted); }
.conn__count { color: var(--text); }
.conn__summary { display: inline-flex; align-items: center; gap: 8px; }
.conn-row {
  display: grid; grid-template-columns: 40px minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr) 34px;
  align-items: center; gap: 16px;
  padding: 14px 24px; border-top: 1px solid var(--line);
  transition: background-color var(--dur-ui) var(--ease-ui);
}
.conn-row:hover { background: rgba(255, 255, 255, 0.02); }
.conn-row__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-strong); background: linear-gradient(180deg, #141414, #090909); color: var(--text); }
.conn-row__name { display: flex; flex-direction: column; font-size: 0.9375rem; color: var(--text); line-height: 1.35; }
.conn-row__name small { font-size: 0.78125rem; color: var(--faint); }
.conn-row__status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-label); color: var(--text); white-space: nowrap; }
.conn-row__time { font-size: 0.78125rem; color: var(--faint); }
.conn-row--sync .conn-row__status { color: var(--muted); }
.sync { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.16); border-top-color: var(--mint); animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.switch { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #2a2c2d; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8a8e8f; }
.switch.is-on { background: #d9dadb; }
.switch.is-on::after { left: 16px; background: #000; }
.conn__log { display: flex; flex-direction: column; min-height: 0; }
.conn__logtitle { padding: 16px 24px; font-size: var(--text-label); color: var(--muted); border-bottom: 1px solid var(--line); }
.log {
  position: relative; flex: 1 1 0; min-height: 260px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
}
/* eventos novos descem devagar a partir do topo (ambiente, 42s) */
.log__track { animation: log-down 42s linear infinite; }
@keyframes log-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.log__track li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  font-size: var(--text-card); color: var(--text);
}
.log__track time { grid-row: span 2; font-size: 0.78125rem; color: var(--faint); padding-top: 2px; font-variant-numeric: tabular-nums; }
.log__track span { grid-column: 2; font-size: var(--text-label); color: var(--muted); }
@media (max-width: 900px) {
  .conn__body { grid-template-columns: 1fr; }
  .conn__list { border-right: 0; border-bottom: 1px solid var(--line); }
  .conn-row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px 16px; gap: 12px; }
  .conn-row__time, .conn-row .switch { display: none; }
  .conn__head { padding: 14px 16px; }
  .log { flex: none; height: 260px; }
}
@media (max-width: 420px) { .conn__summary { display: none; } }

/* Processo: trilho com luz que percorre devagar */
.steps {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  padding-top: 40px;
  clip-path: inset(-16px 0 -16px 0); /* a luz do trilho não passa das bordas do container */
}
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong);
}
.steps::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 22%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  filter: blur(0.5px);
  animation: rail 12s var(--ease-enter) infinite;
}
@keyframes rail { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
.step { position: relative; }
.step::before { /* marco no trilho */
  content: ""; position: absolute; top: -44px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #000; border: 1px solid rgba(255, 255, 255, 0.4);
}
.step__num {
  display: block; font-family: var(--font-sans); font-size: 3rem; font-weight: 400; line-height: 1; letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.14));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
.step__title { margin-top: 18px; font-size: var(--text-title); font-weight: 400; letter-spacing: -0.01em; color: var(--text); }
.step p { margin-top: 8px; font-size: var(--text-card); color: var(--muted); max-width: 30ch; }
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 28px; row-gap: 36px; }
  .steps::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .steps::after { display: none; }
  .step::before { top: 6px; left: -28px; }
}

/* CTA final: serifa gigante e um único botão */
.final {
  position: relative; text-align: center;
  padding-block: clamp(72px, 7vw, 112px) clamp(40px, 4vw, 64px);
  overflow: hidden; isolation: isolate;
}
.final__halo {
  position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1100px, 140vw); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0deg, rgba(255, 255, 255, 0.07) 60deg, transparent 140deg, transparent 200deg, rgba(255, 255, 255, 0.05) 260deg, transparent 330deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 70%);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 70%);
  animation: spin-angle 36s linear infinite;
}
.final__inner { display: flex; flex-direction: column; align-items: center; }
.final__title {
  font-size: var(--text-display); /* 52 → 96, mesma escala do H1 */
  max-width: none;
  background: linear-gradient(180deg, #fff 40%, rgba(255, 255, 255, 0.62));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em;
}
.nowrap { white-space: nowrap; }
.final__lead { margin-top: 20px; font-size: var(--text-lead); color: var(--muted); max-width: 32rem; }
.final .btn { margin-top: 32px; }


/* ---------- Rodapé com a marca em tela inteira ---------- */
.footer { position: relative; padding-bottom: 40px; overflow: hidden; }
.footer__word {
  text-align: center; line-height: 0.8; user-select: none;
  margin-top: clamp(64px, 8vw, 128px); /* respiro entre o CTA final e a marca */
  height: 0.62em; /* corta a base das letras na linha, como no resend */
  font-size: clamp(5rem, 23.5vw, 21rem);
  overflow: hidden;
}
.footer__word span {
  display: inline-block;
  font-weight: 400; letter-spacing: -0.07em;
  /* começa claro (≈ #f0f0f0 a 32%) e só depois some no preto, antes da linha */
  background: linear-gradient(180deg, rgba(240, 240, 240, 0.32) 0%, rgba(240, 240, 240, 0.16) 40%, rgba(240, 240, 240, 0.03) 78%, rgba(240, 240, 240, 0) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: 0.04em;
}
.footer__rule {
  position: relative; height: 1px; background: var(--line-strong);
}
.footer__rule::after { /* clarão abaixo da linha */
  content: ""; position: absolute; left: 15%; right: 15%; top: 1px; height: 140px; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, 0.06), transparent);
}
.footer__grid {
  position: relative;
  display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 40px 32px;
  padding-top: clamp(64px, 8vw, 112px);
}
.footer__brand p { margin-top: 20px; font-size: var(--text-card); color: var(--muted); max-width: 30ch; }
/* status no lugar de redes sociais: o atendimento é pelo WhatsApp */
.footer__status {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  padding: 6px 14px 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  font-size: var(--text-label); color: var(--text);
  transition: border-color var(--dur-ui) var(--ease-ui);
}
.footer__status:hover { border-color: var(--line-strong); }
.footer__title { font-size: var(--text-card); font-weight: 400; color: var(--text); margin-bottom: 20px; }
.footer ul { display: grid; gap: 14px; }
.footer ul a { font-size: var(--text-card); color: var(--muted); transition: color var(--dur-ui) var(--ease-ui); }
.footer ul a:hover { color: var(--text); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(64px, 8vw, 96px); padding-top: 24px;
  /* linha de 1px só na largura do conteúdo (sem o gutter) */
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.footer__bottom p { font-size: var(--text-label); color: var(--faint); }
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}

/* ==========================================================
   Revelação no scroll (só com JS; sem JS tudo fica visível)
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-enter) var(--ease-enter), transform var(--dur-enter) var(--ease-enter);
    transition-delay: calc(var(--d, 0) * 120ms);
  }
  .reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ==========================================================
   Movimento reduzido: sem ambiente, tudo no estado final
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .metrics.is-armed .linechart__line { stroke-dashoffset: 0; }
  .metrics.is-armed .linechart__area, .metrics.is-armed .linechart__dot { opacity: 1; }
  .metrics.is-armed .bars i { transform: none; }
}