/* Whats Fluxo — landing (whatsfluxo.com)
   Padrão visual herdado da Guardian Page (abertura, símbolo vivo, prévia do produto saindo da base)
   e da Metrix Max (barra em pílula de vidro, títulos em dois tons), com a paleta verde do ícone. */

@font-face { font-family: "Geist"; src: url(fonts/geist-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #060a08; --bg-2: #080d0b; --bg-3: #0a110d; --bg-4: #0b120f;
  --card: #0e1512; --card-2: #111a16; --line: #1a2520; --line-2: #26352e;
  --green: #1fd774; --green-2: #12b862; --green-deep: #0a8f4f; --electric: #2ee88a; --mint: #7af0b4; --teal: #00d9a0;
  --cream: #f2f1ea; --muted: #97a49d; --muted-2: #7c8a83; --ink: #03140a;
  --warn: #ff7a59; --amber: #e0b86a; --sky: #7ec8f2;
  --ease: cubic-bezier(.16,1,.3,1);
  --container: min(100% - 48px, 1180px);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--cream); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.container { width: var(--container); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 400; padding: 10px 14px; border-radius: 9px; background: var(--green); color: var(--ink); font-weight: 650; transition: top .2s; }
.skip:focus { top: 12px; }

/* ───────────── Botões ───────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 19px; border-radius: 9px; border: 1px solid transparent; font-size: 13px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), background 200ms, border-color 200ms; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(180deg, #2ae27f, var(--green-2)); border-color: #35e88a; color: var(--ink); box-shadow: 0 4px 22px rgba(31,215,116,.18), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary:hover { box-shadow: 0 8px 28px rgba(31,215,116,.28), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-secondary { background: rgba(242,241,234,.035); border-color: #33443b; color: var(--cream); }
.btn-secondary:hover { border-color: #4a6155; background: rgba(242,241,234,.06); }
.btn-lg { min-height: 50px; padding: 0 24px; font-size: 14px; }

/* ───────────── Rótulos ───────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; color: var(--mint); }
.eyebrow::before { content: ""; width: 19px; height: 1px; background: var(--electric); }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 11px; border: 1px solid #25382e; border-radius: 999px; background: rgba(14,21,18,.7); font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #cfe9dc; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.mono { font-family: var(--mono); }
.tag { font-size: 9.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }

/* ───────────── Navegação ───────────── */
.header { position: fixed; inset: 0 0 auto; z-index: 100; padding: 12px 12px 0; transition: padding 250ms var(--ease); }
.nav { width: min(100%, 1204px); margin-inline: auto; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 12px 0 20px; border: 1px solid transparent; border-radius: 16px; transition: background 250ms, border-color 250ms, box-shadow 250ms, backdrop-filter 250ms; }
.header.scrolled .nav, .header.open .nav { background: rgba(9,14,12,.74); border-color: rgba(151,191,168,.14); box-shadow: 0 8px 32px rgba(0,0,0,.35); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.nav-logo { flex: none; display: block; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: clamp(16px, 2vw, 30px); margin-left: auto; }
.nav-links a { font-size: 13px; font-weight: 500; color: #b1bdb6; transition: color 200ms; }
.nav-links a:hover { color: var(--cream); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-login { font-size: 13px; font-weight: 500; color: #cfd8d3; }
.nav-login:hover { color: #fff; }
.nav-cta { min-height: 38px; padding: 0 15px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(14,21,18,.65); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .i-close { display: none; }
.header.open .menu-btn .i-open { display: none; }
.header.open .menu-btn .i-close { display: block; }
.mobile-menu { width: min(100%, 1204px); margin: 8px auto 0; max-height: 0; opacity: 0; overflow: hidden; border-radius: 16px; background: rgba(8,13,11,.98); border: 1px solid transparent; transition: max-height 300ms var(--ease), opacity 250ms, border-color 250ms; }
.header.open .mobile-menu { max-height: min(460px, calc(100dvh - 80px)); opacity: 1; border-color: rgba(151,191,168,.14); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu nav { display: grid; padding: 10px 16px 18px; }
.mobile-menu a:not(.btn) { display: flex; align-items: center; height: 46px; font-size: 15px; color: #d7e0db; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 16px; width: 100%; }

/* ───────────── Hero ───────────── */
.hero { position: relative; padding-top: 150px; text-align: center; isolation: isolate; overflow-x: clip; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 50% 34% at 50% 12%, rgba(31,215,116,.12), transparent 85%); }
.hero-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(150,235,190,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(150,235,190,.075) 1px, transparent 1px); background-size: 78px 78px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 30%, transparent 78%); }
.hero-inner { display: flex; flex-direction: column; align-items: center; }

/* Símbolo vivo: flutua 2px, reflexo diagonal recortado no próprio ícone e mensagens que o atravessam */
.hero-mark { position: relative; width: 84px; height: 84px; margin-bottom: 24px; display: grid; place-items: center; animation: rise-in .6s var(--ease) both; }
.hero-mark-img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(31,215,116,.28)); animation: wf-mark-float 6s ease-in-out infinite; }
.hero-mark-sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: url(whatsfluxo-icone-quadrado.webp) center / 84px 84px no-repeat; mask: url(whatsfluxo-icone-quadrado.webp) center / 84px 84px no-repeat; animation: wf-mark-float 6s ease-in-out infinite; }
.hero-mark-sweep::after { content: ""; position: absolute; top: -30%; left: -60%; width: 45%; height: 160%; background: linear-gradient(115deg, transparent, rgba(215,255,232,.62), transparent); transform: skewX(-18deg); animation: wf-mark-sweep 7s ease-in-out infinite; }
.msg-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--electric); box-shadow: 0 0 8px rgba(46,232,138,.8); opacity: 0; }
.msg-dot.d1 { top: 22px; left: -16px; animation: msg-left .65s ease .55s forwards; }
.msg-dot.d2 { top: 44px; left: -24px; animation: msg-left .65s ease .7s forwards; }
.msg-dot.d3 { top: 30px; right: -18px; background: #e08870; box-shadow: 0 0 8px rgba(224,136,112,.8); animation: msg-block .65s ease .68s forwards; }
.msg-dot.d4 { bottom: 16px; right: -22px; animation: msg-right .6s ease .78s forwards; }

.hero .pill { animation: rise-in .5s ease .1s both; }
.hero h1 { margin-top: 26px; max-width: 1140px; font-size: clamp(44px, 5.95vw, 76px); font-weight: 600; line-height: 1.075; letter-spacing: -.048em; text-wrap: balance; animation: rise-in .62s var(--ease) .16s both; }
.hero h1 span { display: block; }
.hero h1 .accent { background: linear-gradient(92deg, #8ef5bf 0%, var(--green) 45%, #3ee6b3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin-top: 26px; max-width: 700px; font-size: 17px; line-height: 1.7; color: #aebbb4; text-wrap: pretty; animation: rise-in .62s var(--ease) .22s both; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; animation: rise-in .62s var(--ease) .28s both; }
.hero-note { margin-top: 18px; font-size: 12px; color: var(--muted-2); animation: rise-in .62s var(--ease) .32s both; }

/* Palco: grade em perspectiva afunilando até a prévia do produto */
.stage { position: relative; margin-top: 64px; animation: rise-in .7s var(--ease) .4s both; }
.stage-floor { position: absolute; left: 50%; bottom: -40px; width: 180%; height: 420px; transform: translateX(-50%) perspective(900px) rotateX(62deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(122,240,180,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(122,240,180,.34) 1px, transparent 1px); background-size: 66px 66px; -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 50% 70% at 50% 100%, #000 20%, transparent 70%); opacity: .5; z-index: -1; }
.stage-halo { position: absolute; left: 50%; bottom: -30px; width: 900px; height: 260px; transform: translateX(-50%); background: radial-gradient(ellipse 52% 100% at 50% 100%, rgba(46,232,138,.28), rgba(18,184,98,.1) 44%, transparent 76%); filter: blur(10px); z-index: -1; }
.stage-veil { position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(180deg, transparent, var(--bg) 92%); pointer-events: none; z-index: 3; }

/* ───────────── Prévia do produto (construtor de jornadas) ───────────── */
.app { position: relative; max-height: 560px; overflow: hidden; border: 1px solid #22322a; border-radius: 17px; background: #0a100d; box-shadow: 0 35px 100px rgba(0,0,0,.35), 0 0 65px rgba(31,215,116,.05); text-align: left; }
.app-bar { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #0c1310; }
.app-bar img { width: 26px; height: 26px; }
.app-sep { width: 1px; height: 22px; background: var(--line-2); }
.app-title { font-size: 13px; font-weight: 600; }
.app-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid #245238; border-radius: 999px; font-size: 10.5px; color: #8fe9b9; background: rgba(31,215,116,.06); }
.app-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.app-bar-actions { margin-left: auto; display: flex; gap: 8px; }
.app-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 7px; font-size: 11.5px; font-weight: 600; color: #cdd8d2; background: #0f1714; }
.app-btn.primary { border-color: #33e487; background: linear-gradient(180deg, #2ae27f, var(--green-2)); color: var(--ink); }
.app-body { display: grid; grid-template-columns: 190px 1fr 268px; min-height: 480px; }
.app-side { padding: 16px 14px; border-right: 1px solid var(--line); }
.app-side .tag { display: block; margin-bottom: 12px; }
.block-list { display: grid; gap: 6px; }
.block-item { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: #c6d1cb; background: #0d1411; }
.block-item i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; font-style: normal; }
.block-item svg { width: 12px; height: 12px; }
.block-item.sel { border-color: #2c6b4a; background: rgba(31,215,116,.07); color: #eafff3; animation: block-select 3.4s ease-in-out infinite; }
.app-canvas { position: relative; overflow: hidden; background-color: #080d0b; background-image: radial-gradient(rgba(150,235,190,.13) 1px, transparent 1px); background-size: 18px 18px; }
.canvas-head { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; z-index: 2; }
.edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.edges path { fill: none; stroke: #2f4c3d; stroke-width: 1.5; }
.edges .flow { stroke: var(--electric); stroke-width: 2; stroke-dasharray: 6 190; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(46,232,138,.9)); animation: edge-flow 2.8s linear infinite; }
.edges .flow.late { animation-delay: 1.1s; }
.edges .flow.later { animation-delay: 1.9s; }
.edges .warn { stroke: #6b3b30; stroke-dasharray: 4 4; }
.node { position: absolute; width: 196px; border: 1px solid #22322a; border-radius: 12px; background: #0e1612; box-shadow: 0 10px 24px rgba(0,0,0,.35); font-size: 11.5px; }
.node-h { display: flex; align-items: center; gap: 7px; padding: 9px 11px 3px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.node-h svg { width: 11px; height: 11px; }
.node-t { padding: 0 11px 9px; font-size: 12.5px; font-weight: 600; color: #eef5f1; }
.node-d { padding: 0 11px 10px; margin-top: -4px; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.node-out { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 11px; border-top: 1px solid var(--line); font-size: 10.5px; color: #c4d0c9; }
.node-out b { font-weight: 500; }
.node-out small { font-size: 9px; color: var(--muted-2); letter-spacing: .04em; }
.node-out.muted { color: var(--muted-2); }
.node-out.bad { color: #e2a191; }
.node.trigger { border-left: 3px solid var(--sky); }
.node.tpl { border-left: 3px solid var(--green); animation: node-select 3.4s ease-in-out infinite; }
.node.text { border-left: 3px solid var(--teal); }
.node.stop { border-left: 3px solid #d98a78; width: 120px; }
.n-trigger { left: 2.5%; top: 32%; width: 176px; }
.n-tpl { left: 32%; top: 16%; }
.n-text1 { right: 4%; top: 13%; }
.n-text2 { right: 4%; top: 46%; }
.n-stop { right: 10%; top: 76%; }
.app-preview { padding: 16px 14px; border-left: 1px solid var(--line); background: #0b110e; }
.app-preview .tag { display: block; margin-bottom: 12px; }
.phone { border: 1px solid #22322a; border-radius: 16px; overflow: hidden; background: #0b141a; }
.phone-top { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #1f2c33; }
.phone-top img { width: 26px; height: 26px; border-radius: 50%; background: #0b141a; padding: 3px; }
.phone-top b { display: block; font-size: 11.5px; color: #e9edef; }
.phone-top small { font-size: 9.5px; color: #8696a0; }
.phone-chat { padding: 12px 10px 14px; background-color: #0b141a; background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size: 14px 14px; }
.bubble { position: relative; max-width: 94%; padding: 8px 9px 16px; border-radius: 9px; font-size: 11px; line-height: 1.45; color: #e9edef; background: #1f2c33; }
.bubble.out { margin-left: auto; background: #005c4b; }
.bubble small { position: absolute; right: 8px; bottom: 3px; font-size: 8.5px; color: rgba(233,237,239,.6); }
.bubble small .ticks { color: #53bdeb; }
.qr { display: grid; gap: 4px; margin-top: 4px; }
.qr span { display: block; padding: 7px; border-radius: 8px; background: #1f2c33; text-align: center; font-size: 11px; font-weight: 500; color: #53bdeb; }
.qr span.tap { animation: qr-tap 3.4s ease-in-out infinite; }
.bubble.in { margin-top: 8px; max-width: 70%; padding-bottom: 8px; }
.bubble.in.reply { animation: reply-in 3.4s ease-in-out infinite; }
.preview-meta { margin-top: 12px; display: grid; gap: 6px; }
.preview-meta div { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.preview-meta b { font-weight: 500; color: #d7e3dc; }
.preview-meta .ok { color: #8fe9b9; }

/* ───────────── Seções ───────────── */
section { position: relative; }
.section { padding: 124px 0; border-top: 1px solid rgba(151,191,168,.08); }
.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.section h2 { margin-top: 18px; font-size: clamp(34px, 4vw, 52px); font-weight: 600; line-height: 1.13; letter-spacing: -.039em; text-wrap: balance; }
.section h2 .dim { display: block; color: #7f8c86; }
.lead { margin-top: 18px; max-width: 660px; font-size: 16px; line-height: 1.75; color: var(--muted); text-wrap: pretty; }
.center .lead { margin-inline: auto; }

/* Faixa clara */
.light { background: linear-gradient(180deg, #F4FAF6 0%, #E6F1EB 100%); color: #0a1a12; border-top: 0; --muted: #52665b; --muted-2: #56695e; --line: rgba(10,26,18,.10); --mint: #07733f; --electric: #12b862; }
.light h2 .dim { color: #7b8a82; }

/* Passos */
.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step { position: relative; padding: 22px 20px 24px; border: 1px solid rgba(10,26,18,.08); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(10,26,18,.04), 0 12px 32px -22px rgba(10,26,18,.28); }
.step-idx { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--muted-2); }
.step-ico { margin-top: 18px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #eaf7f0; color: #0a8f4f; }
.step-ico svg { width: 23px; height: 23px; }
.step h3 { margin-top: 18px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.step p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #52665b; }
.step.hl { border-color: rgba(18,184,98,.35); background: linear-gradient(180deg, #fff, #f1fbf5); }
.step.hl .step-ico { background: #0a8f4f; color: #fff; }
.step:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; width: 10px; height: 10px; border-top: 1.5px solid #9fc7b1; border-right: 1.5px solid #9fc7b1; transform: translateY(-50%) rotate(45deg); z-index: 2; }
.fine { margin-top: 22px; font-size: 11.5px; line-height: 1.6; color: var(--muted-2); text-align: center; }

/* Recursos */
.features { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #0e1512, #0b110e); transition: transform 260ms var(--ease), border-color 260ms; }
.feature:hover { transform: translateY(-3px); border-color: #2b4337; }
.feature-top { display: flex; justify-content: space-between; align-items: center; }
.feature-top .ico { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 10px; color: var(--mint); }
.feature-top .ico svg { width: 17px; height: 17px; }
.feature-visual { position: relative; height: 200px; margin: 18px 0 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background-color: #0a100d; background-image: linear-gradient(rgba(150,235,190,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150,235,190,.05) 1px, transparent 1px); background-size: 28px 28px; }
.feature-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(31,215,116,.12), transparent 70%); }
.feature h3 { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.feature p { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.feature ul { margin-top: 14px; display: grid; gap: 7px; }
.feature li { display: flex; gap: 9px; font-size: 12.5px; color: #c3cfc8; }
.feature li::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: rgba(31,215,116,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ee88a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; }

/* Visual 1: disparo — barras de envio */
.v-send { position: absolute; inset: 22px 20px; display: grid; align-content: center; gap: 9px; }
.v-send .row { display: grid; grid-template-columns: 74px 1fr 38px; align-items: center; gap: 10px; font-size: 10.5px; color: var(--muted); }
.v-send .bar { height: 7px; border-radius: 99px; background: #15211b; overflow: hidden; }
.v-send .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green-2), var(--electric)); transform-origin: left; animation: bar-grow 3.6s var(--ease) infinite; }
.v-send .row:nth-child(2) i { animation-delay: .25s; }
.v-send .row:nth-child(3) i { animation-delay: .5s; background: linear-gradient(90deg, #0f9e7a, var(--teal)); }
.v-send .row:nth-child(4) i { animation-delay: .75s; background: linear-gradient(90deg, #b5654f, #e08870); }
.v-send b { font-family: var(--mono); font-weight: 500; font-size: 10.5px; color: #d6e2db; text-align: right; }
/* Visual 2: jornada — nós que se acendem */
.v-flow { position: absolute; inset: 0; }
.v-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-flow path { fill: none; stroke: #2d4a3b; stroke-width: 1.4; }
.v-flow .pulse { stroke: var(--electric); stroke-width: 2; stroke-dasharray: 5 140; stroke-linecap: round; animation: edge-flow 2.6s linear infinite; }
.v-flow .chip { position: absolute; padding: 6px 10px; border: 1px solid #25382e; border-radius: 8px; background: #0f1714; font-size: 10.5px; color: #d6e2db; white-space: nowrap; }
.v-flow .chip.g { border-color: #2c6b4a; color: #a6f0c8; }
.v-flow .chip.r { border-color: #5a3129; color: #e2a191; }
/* Visual 3: chat — conversas */
.v-chat { position: absolute; inset: 18px 18px; display: grid; gap: 7px; align-content: center; }
.v-chat .c { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: #0e1612; }
.v-chat .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #04140b; }
.v-chat .c b { display: block; font-size: 11px; font-weight: 600; color: #e6efea; }
.v-chat .c small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-chat .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--green); color: var(--ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.v-chat .c.new { animation: row-new 3.6s var(--ease) infinite; }
.v-chat .win { font-size: 9.5px; color: #8fe9b9; }

/* Recursos secundários */
.tiles { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #0b110e; transition: border-color 250ms; }
.tile:hover { border-color: #2b4337; }
.tile .ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(31,215,116,.07); color: var(--mint); }
.tile .ico svg { width: 18px; height: 18px; }
.tile h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.tile p { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* Jornada que segue o clique */
.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 72px; align-items: center; }
.checks { margin-top: 28px; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.6; color: #c8d3cd; }
.checks li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #2c6b4a; background: rgba(31,215,116,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ee88a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.checks b { color: var(--cream); font-weight: 600; }
.note { margin-top: 26px; padding: 12px 16px; border-left: 2px solid var(--green); background: rgba(31,215,116,.04); border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.diagram { border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(180deg, #0c1310, #090e0c); overflow: hidden; }
.diagram-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #8fe9b9; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(31,215,116,.6); animation: live-ping 2s ease-out infinite; }
.diagram-body { display: grid; grid-template-columns: 170px 60px 1fr; align-items: center; padding: 26px 22px 22px; }
.d-source { padding: 14px; border: 1px solid #245238; border-radius: 12px; background: rgba(31,215,116,.05); }
.d-source img { width: 30px; height: 30px; }
.d-source b { display: block; margin-top: 10px; font-size: 12.5px; }
.d-source small { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.d-link { position: relative; height: 2px; background: #22352b; }
.d-link::after { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--electric); box-shadow: 0 0 10px var(--electric); animation: link-run 2.8s linear infinite; }
.d-outs { display: grid; gap: 8px; }
.d-out { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0d1411; }
.d-out i { width: 8px; height: 8px; border-radius: 50%; }
.d-out b { font-size: 12.5px; font-weight: 600; }
.d-out small { display: block; font-size: 10.5px; color: var(--muted); }
.d-out em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted-2); }
.d-out.hl { border-color: #2c6b4a; background: rgba(31,215,116,.06); animation: out-hl 4.2s ease-in-out infinite; }
.d-foot { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted-2); }

/* Conformidade */
.trust { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; background: var(--line); }
.trust-item { padding: 26px 24px; background: #090e0c; }
.trust-item .ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-2); color: var(--mint); }
.trust-item .ico svg { width: 17px; height: 17px; }
.trust-item h3 { margin-top: 16px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.trust-item p { margin-top: 6px; font-size: 13px; line-height: 1.65; color: var(--muted); }

/* Sem × Com */
.versus { margin-top: 56px; display: grid; grid-template-columns: 1fr 44px 1.15fr; align-items: stretch; gap: 14px; }
.vs-card { padding: 26px; border-radius: 18px; border: 1px solid rgba(10,26,18,.09); background: #fff; box-shadow: 0 1px 2px rgba(10,26,18,.04), 0 12px 32px -22px rgba(10,26,18,.28); }
.vs-card .tag { color: var(--muted-2); }
.vs-card ul { margin-top: 18px; display: grid; gap: 11px; }
.vs-card li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #56695e; }
.vs-card.without li::before { content: "×"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #f6ece9; color: #c0654f; font-size: 13px; line-height: 1; }
.vs-card.without li { text-decoration: line-through; text-decoration-color: rgba(86,105,94,.35); }
.vs-card.with { border-color: rgba(18,184,98,.35); box-shadow: 0 24px 60px -30px rgba(18,184,98,.45); }
.vs-card.with .brand { display: flex; align-items: center; gap: 10px; }
.vs-card.with .brand img { height: 26px; width: auto; }
.vs-card.with li { color: #0a1a12; font-weight: 600; }
.vs-card.with li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #0a8f4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.vs-close { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(10,26,18,.08); font-size: 13px; color: var(--muted-2); }
.vs-card.with .vs-close { color: #07733f; font-weight: 600; }
.vs-arrow { display: grid; place-items: center; color: #7fae95; }
.vs-arrow svg { width: 24px; height: 24px; }

/* FAQ */
.faq { display: grid; grid-template-columns: .82fr 1.18fr; gap: 72px; align-items: start; }
.faq-intro { position: sticky; top: 104px; }
.faq-intro h2 { font-size: clamp(30px, 3.4vw, 44px); }
.faq-intro .btn { margin-top: 26px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa-h { margin: 0; font: inherit; }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 0; border: 0; background: none; text-align: left; font-size: 15.5px; font-weight: 550; letter-spacing: -.01em; cursor: pointer; }
.qa .plus { position: relative; flex: none; width: 16px; height: 16px; transition: transform 300ms var(--ease); }
.qa .plus::before, .qa .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--mint); transform: translate(-50%, -50%); }
.qa .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[data-open] .plus { transform: rotate(45deg); }
.qa-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--ease); }
.qa-body > div { overflow: hidden; }
.js .qa-body { grid-template-rows: 0fr; }
.js .qa[data-open] .qa-body { grid-template-rows: 1fr; }
.js .qa-body > div { visibility: hidden; transition: visibility 0s linear 320ms; }
.js .qa[data-open] .qa-body > div { visibility: visible; transition-delay: 0s; }
html:not(.js) .qa .plus { display: none; }
.qa-body p { padding: 0 34px 22px 0; font-size: 14px; line-height: 1.75; color: var(--muted); }

/* CTA final */
.final { padding: 138px 0; text-align: center; overflow: hidden; background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(31,215,116,.10), transparent 75%), #080d0b; border-top: 1px solid rgba(151,191,168,.08); }
.final-mark { position: absolute; left: 50%; top: 50%; width: 480px; transform: translate(-50%, -50%); opacity: .05; pointer-events: none; }
.final .container { position: relative; }
.final h2 { margin-top: 18px; font-size: clamp(39px, 5vw, 64px); font-weight: 600; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.final .lead { margin-inline: auto; }
.final .hero-actions { animation: none; }
.final small { display: block; margin-top: 18px; font-size: 11.5px; color: var(--muted-2); }

/* Rodapé */
.footer { padding: 56px 0 0; background: #070c0a; border-top: 1px solid var(--line); }
.footer-main { display: flex; justify-content: space-between; gap: 80px; padding-bottom: 55px; }
.footer-brand img { height: 30px; width: auto; }
.footer-brand p { margin-top: 16px; max-width: 320px; font-size: 12.5px; line-height: 1.7; color: #8b9a92; }
.footer-cols { display: flex; gap: clamp(55px, 9vw, 130px); }
.footer-cols strong { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #c5d3cb; }
.footer-cols ul { display: grid; gap: 11px; }
.footer-cols a { font-size: 12.5px; color: #8b9a92; transition: color 200ms; }
.footer-cols a:hover { color: var(--cream); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding: 17px 0 24px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.6; color: #718078; }
.footer-bottom p:last-of-type { max-width: 520px; text-align: right; }
.motion-toggle { flex: none; align-self: center; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; font-size: 11px; color: #9fb0a7; cursor: pointer; }
.motion-toggle:hover { color: var(--cream); border-color: #3a5146; }
.no-motion :is(.hero-mark-img, .hero-mark-sweep, .block-item.sel, .node.tpl, .qr span, .bubble.in.reply, .v-send .bar i, .v-chat .c, .d-out.hl, .edges path, .v-flow path), .no-motion .hero-mark-sweep::after, .no-motion .live::before, .no-motion .d-link::after, .offscreen :is(.hero-mark-img, .hero-mark-sweep, .block-item.sel, .node.tpl, .qr span, .bubble.in.reply, .v-send .bar i, .v-chat .c, .d-out.hl, .edges path, .v-flow path), .offscreen .hero-mark-sweep::after, .offscreen .live::before, .offscreen .d-link::after { animation-play-state: paused !important; }

/* ───────────── Abertura (uma vez por sessão) ───────────── */
.intro { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(31,215,116,.10), transparent 70%), #040806; }
.intro-on .intro { display: flex; animation: wf-intro-in 260ms ease both, wf-intro-autohide 2.7s ease forwards; }
.intro.closing { animation: wf-intro-out 420ms cubic-bezier(.4,0,.2,1) both !important; }
.intro-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(46,232,138,.26), rgba(18,184,98,.05) 45%, transparent 70%); filter: blur(12px); animation: wf-glow 2s var(--ease) both; }
.intro-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(122,240,180,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(122,240,180,.10) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 42% 42% at 50% 50%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 42% 42% at 50% 50%, #000 20%, transparent 72%); opacity: 0; animation: wf-grid 2s ease both; }
.intro-stage { position: relative; width: 240px; height: 240px; display: grid; place-items: center; animation: wf-stage-settle 700ms var(--ease) 1.28s both; }
.intro-field { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-orbit { stroke: rgba(122,240,180,.40); stroke-width: 1; fill: none; stroke-dasharray: 3 8; transform-origin: 120px 120px; opacity: 0; animation: wf-orbit-in 700ms ease .95s both, wf-orbit-spin 14s linear 1.1s infinite; }
.intro-hex { stroke: var(--electric); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 760; stroke-dashoffset: 760; filter: drop-shadow(0 0 6px rgba(46,232,138,.5)); animation: wf-hex-draw 900ms cubic-bezier(.65,0,.35,1) .5s forwards, wf-hex-pulse 2s ease 1.4s both; }
.intro-mark { position: relative; width: 132px; height: 132px; display: grid; place-items: center; clip-path: inset(100% 0 0 0); opacity: 0; animation: wf-mark-reveal 820ms var(--ease) .62s forwards, wf-mark-glow 1.4s ease 1.35s both; }
.intro-mark img { width: 100%; height: 100%; object-fit: contain; }
.intro-scan { position: absolute; left: -10%; width: 120%; height: 26px; background: linear-gradient(180deg, transparent, rgba(170,255,210,.85), transparent); filter: blur(2px); opacity: 0; animation: wf-scan 820ms var(--ease) .62s both; }
.intro-msg { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(122,240,180,.9); opacity: 0; }
.intro-msg.blocked { background: var(--warn); box-shadow: 0 0 8px rgba(255,122,89,.9); }
.intro-msg.a { animation: wf-msg-pass 900ms ease 1.25s both; --from-x: -150px; --from-y: -60px; }
.intro-msg.b { animation: wf-msg-pass 900ms ease 1.5s both; --from-x: 150px; --from-y: 55px; }
.intro-msg.c { animation: wf-msg-block 820ms ease 1.4s both; --from-x: 140px; --from-y: -80px; --stop-x: 46px; --stop-y: -26px; }
.intro-msg.d { animation: wf-msg-block 820ms ease 1.62s both; --from-x: -130px; --from-y: 78px; --stop-x: -44px; --stop-y: 26px; }

/* ───────────── Keyframes ───────────── */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wf-mark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes wf-mark-sweep { 0%, 62% { left: -60%; opacity: 0; } 70% { opacity: 1; } 86% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } }
@keyframes msg-left { 0% { opacity: 0; transform: translateX(-8px); } 30% { opacity: 1; } 100% { opacity: .9; transform: translateX(105px); } }
@keyframes msg-right { 0% { opacity: 0; transform: translateX(10px); } 30% { opacity: 1; } 100% { opacity: .8; transform: translateX(-110px); } }
@keyframes msg-block { 0% { opacity: 0; transform: translateX(12px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(-26px) scale(.45); } }
@keyframes edge-flow { from { stroke-dashoffset: 196; } to { stroke-dashoffset: 0; } }
@keyframes node-select { 0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,.35); border-color: #22322a; } 45%, 60% { box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 3px rgba(31,215,116,.18); border-color: #2f7a53; } }
@keyframes block-select { 0%, 100% { border-color: #2c6b4a; } 50% { border-color: #3fae74; } }
@keyframes qr-tap { 0%, 34%, 58%, 100% { background: #1f2c33; } 40%, 52% { background: #2a3b44; } }
@keyframes reply-in { 0%, 44% { opacity: 0; transform: translateY(6px); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bar-grow { 0% { transform: scaleX(0); } 45%, 88% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .4; } }
@keyframes row-new { 0%, 100% { border-color: var(--line); } 40%, 60% { border-color: #2c6b4a; } }
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(31,215,116,.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(31,215,116,0); } }
@keyframes link-run { from { left: 0; } to { left: calc(100% - 6px); } }
@keyframes out-hl { 0%, 100% { border-color: #2c6b4a; } 50% { border-color: #3fae74; box-shadow: 0 0 0 3px rgba(31,215,116,.10); } }
@keyframes wf-intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wf-intro-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes wf-intro-autohide { 0%, 90% { opacity: 1; visibility: visible; pointer-events: auto; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes wf-glow { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: .55; transform: scale(1.04); } }
@keyframes wf-grid { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .35; } }
@keyframes wf-stage-settle { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes wf-hex-draw { to { stroke-dashoffset: 0; } }
@keyframes wf-hex-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes wf-orbit-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wf-orbit-spin { to { transform: rotate(360deg); } }
@keyframes wf-mark-reveal { 0% { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(6px) scale(.94); } 60% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wf-mark-glow { 0% { filter: drop-shadow(0 0 0 rgba(46,232,138,0)); } 40% { filter: drop-shadow(0 0 14px rgba(46,232,138,.55)); } 100% { filter: drop-shadow(0 0 7px rgba(46,232,138,.28)); } }
@keyframes wf-scan { 0% { opacity: 0; transform: translateY(-70px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(66px); } }
@keyframes wf-msg-pass { 0% { opacity: 0; transform: translate(calc(var(--from-x) - 50%), calc(var(--from-y) - 50%)) scale(.6); } 25% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--from-x) * -0.35 - 50%), calc(var(--from-y) * -0.35 - 50%)) scale(.6); } }
@keyframes wf-msg-block { 0% { opacity: 0; transform: translate(calc(var(--from-x) - 50%), calc(var(--from-y) - 50%)) scale(.7); } 30% { opacity: 1; } 70% { opacity: 1; transform: translate(calc(var(--stop-x) - 50%), calc(var(--stop-y) - 50%)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--stop-x) * 1.4 - 50%), calc(var(--stop-y) * 1.4 - 50%)) scale(.5); } }

/* ───────────── Responsivo ───────────── */
@media (max-width: 1120px) {
  .nav-links { gap: 14px; }
  .app-body { grid-template-columns: 170px 1fr 240px; }
  .n-trigger { left: 3%; top: 10%; } .n-tpl { left: 3%; top: 35%; } .n-text1 { right: 3%; top: 12%; } .n-text2 { right: 3%; top: 58%; } .n-stop { display: none; }
}
@media (max-width: 980px) {
  .versus { grid-template-columns: 1fr; }
  .vs-arrow { transform: rotate(90deg); height: 30px; }
  .faq { grid-template-columns: 1fr; gap: 36px; }
  .faq-intro { position: static; }
  .features { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .menu-btn { display: grid; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2)::after { display: none; }
  .split { grid-template-columns: 1fr; gap: 42px; }
  .app-body { grid-template-columns: 1fr 250px; }
  .app-side { display: none; }
  .stage { margin-top: 44px; }
  .stage-floor { background-size: 46px 46px; }
}
@media (max-width: 760px) {
  .hero-mark, .hero-mark-img { width: 64px; height: 64px; }
  .hero-mark-sweep { -webkit-mask-size: 64px 64px; mask-size: 64px 64px; }
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .app-preview { display: none; }
  .app-canvas { height: 420px; }
  .features, .tiles, .trust { grid-template-columns: 1fr; }
  .diagram-body { grid-template-columns: 1fr; gap: 0; padding: 20px 16px; }
  .d-link { width: 2px; height: 28px; margin: 0 auto; }
  .d-link::after { left: -2px; animation-name: link-run-v; }
  @keyframes link-run-v { from { top: 0; } to { top: calc(100% - 6px); } }
}
@media (max-width: 640px) {
  :root { --container: min(100% - 36px, 1180px); }
  .header { padding: 8px 8px 0; }
  .nav { height: 56px; padding: 0 8px 0 14px; }
  .nav-logo img { height: 26px; }
  .hero { padding-top: 124px; }
  .hero h1 { font-size: clamp(38px, 10.2vw, 46px); }
  .hero-sub { font-size: 16px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .section { padding: 85px 0; }
  .section h2 { font-size: clamp(32px, 8.6vw, 42px); }
  .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .app-bar-actions .app-btn:not(.primary) { display: none; }
  .app-bar .app-badge { display: none; }
  .app-canvas { height: 400px; }
  .node, .n-trigger { width: 150px; font-size: 10.5px; }
  .node-t { font-size: 11.5px; }
  .n-trigger { left: 3%; top: 10%; } .n-tpl { left: 3%; top: 40%; } .n-text1 { right: 3%; top: 10%; } .n-text2 { right: 3%; top: 64%; } .n-stop { display: none; }
  .app-canvas { height: 430px; }
  .final { padding: 105px 0; }
  .final-mark { width: 320px; }
  .footer-main { flex-direction: column; gap: 38px; }
  .footer-cols { justify-content: space-between; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .footer-bottom p:last-of-type { text-align: left; }
  .motion-toggle { align-self: flex-start; margin-top: 6px; }
}
@media (max-width: 380px) {
  :root { --container: min(100% - 30px, 1180px); }
  .hero h1 { font-size: 36px; }
  .node, .n-trigger { width: 140px; }
}

/* ───────────── Movimento reduzido ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .intro, .msg-dot, .hero-mark-sweep, .edges .flow, .v-flow .pulse, .d-link::after { display: none !important; }
  .bubble.in.reply { opacity: 1; transform: none; }
}