/* Melivu — landing page
   Tokens herdados do design system do app (DESIGN.md): verde esmeralda, ambiente escuro premium,
   DM Sans no corpo e Manrope nos títulos. */

:root {
  --green: #0fa66c;
  --green-dark: #0a8358;
  --green-bright: #22c98a;
  --green-mint: #8ef7cd;
  --gradient: linear-gradient(135deg, #12c785, #0a8f8c);
  --teal: #0e9aa0;

  --bg: #06110c;
  --bg-2: #08150f;
  --surface: #0f2419;
  --surface-2: #0a1c14;
  --ink: #e9f5ef;
  --body: #a9c4b7;
  --muted: #8fb3a2;
  --muted-2: #6f8f80;
  --line: rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .06);

  --orange: #ffb98a;
  --violet: #c5bdff;
  --danger: #ff9c92;

  /* app (claro) — usado dentro das telas simuladas */
  --app-canvas: #f4f6f5;
  --app-surface: #ffffff;
  --app-ink: #131a16;
  --app-body: #3f4a44;
  --app-muted: #707b74;
  --app-line: #e7ebe7;
  --app-soft: #e9f9f1;

  --font: 'DM Sans', system-ui, sans-serif;
  --display: 'Manrope', 'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- ambiente ---------- */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(34, 201, 138, .16), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(14, 154, 160, .12), transparent 60%),
    var(--bg);
}
.ambient::after {
  content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

/* ---------- tipografia ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-bright);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-bright); box-shadow: 0 0 0 4px rgba(34, 201, 138, .18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(34, 201, 138, 0); } }

h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.02em; }
h1 { font-size: clamp(40px, 7vw, 84px); font-weight: 800; line-height: 1.02; }
h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; line-height: 1.06; }
h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700; line-height: 1.2; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--body); max-width: 620px; }
.grad-text {
  background: linear-gradient(120deg, #8ef7cd, #22c98a 40%, #0e9aa0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head { text-align: center; display: grid; justify-items: center; gap: 18px; margin-bottom: 64px; }
.section-head .lead { margin: 0 auto; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 14px;
  font: 700 15px/1 var(--display); white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .15s, border-color .15s;
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 6px 16px rgba(15, 166, 108, .3), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-primary:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 26px rgba(15, 166, 108, .45); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-primary:active { transform: scale(.97); }
.btn-ghost { border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--ink); }
.btn-ghost:hover { border-color: rgba(34, 201, 138, .45); background: rgba(34, 201, 138, .07); }
.btn-sm { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; }

/* ---------- navegação ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(6, 17, 12, .78); backdrop-filter: blur(16px) saturate(1.2); border-color: var(--line-soft); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 11px; background: var(--gradient);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(15, 166, 108, .35);
}
.logo-mark svg { width: 20px; height: 20px; }
.logo .dot { color: var(--green-bright); }
.nav-links { display: flex; gap: 30px; font-size: 14.5px; color: var(--body); }
.nav-links a { transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); place-items: center; }
.nav-toggle svg { width: 18px; height: 18px; }

/* ---------- hero ---------- */
.hero { padding: 150px 0 0; position: relative; text-align: center; }
.hero-copy { display: grid; justify-items: center; gap: 24px; }
.hero h1 { max-width: 980px; }
.hero .lead { margin: 0 auto; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.hero-badges { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--muted); }
.hero-badges span { display: inline-flex; gap: 6px; align-items: center; }
.hero-badges svg { width: 15px; height: 15px; color: var(--green-bright); }

.hero-stage { perspective: 1600px; margin-top: 72px; padding-bottom: 40px; }
.device {
  position: relative; max-width: 1120px; margin: 0 auto;
  border-radius: 22px; padding: 10px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  border: 1px solid rgba(34, 201, 138, .25);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 6px rgba(34, 201, 138, .05), 0 0 120px rgba(34, 201, 138, .18);
  transform-origin: 50% 0%;
  will-change: transform;
}
.device-bar { display: flex; gap: 6px; padding: 4px 8px 10px; align-items: center; }
.device-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.device-bar .url {
  margin: 0 auto; font-size: 11.5px; color: var(--muted); padding: 4px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); display: flex; align-items: center; gap: 6px;
}
.device-bar .url svg { width: 11px; height: 11px; }
.device-screen { border-radius: 14px; overflow: hidden; background: var(--app-canvas); aspect-ratio: 16 / 9.4; position: relative; }
.hero-glow {
  position: absolute; left: 50%; top: 40%; width: 70%; height: 60%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(34, 201, 138, .35), transparent); filter: blur(40px); z-index: -1;
}

/* ---------- APP MOCK (claro, denso, fiel ao produto) ---------- */
.app { display: grid; grid-template-columns: 17% 1fr; height: 100%; font-family: var(--font); color: var(--app-ink); text-align: left; font-size: 10px; }
.app-side { background: #fff; border-right: 1px solid var(--app-line); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.app-brand { display: flex; align-items: center; gap: 6px; font: 800 12px/1 var(--display); padding: 2px 6px 12px; }
.app-brand b { width: 18px; height: 18px; border-radius: 6px; background: var(--gradient); display: grid; place-items: center; color: #fff; font-size: 10px; }
.app-nav { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 7px; color: var(--app-body); font-size: 9.5px; white-space: nowrap; overflow: hidden; }
.app-nav svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-nav.active { background: var(--app-soft); color: var(--green-dark); font-weight: 600; box-shadow: inset 2px 0 0 var(--green); }
.app-nav .count { margin-left: auto; background: var(--green); color: #fff; border-radius: 999px; padding: 1px 5px; font-size: 8px; font-weight: 700; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-top { height: 36px; flex: none; background: #fff; border-bottom: 1px solid var(--app-line); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.app-top strong { font: 700 11px/1 var(--display); }
.app-top .tools { display: flex; gap: 6px; align-items: center; }
.app-top .tools i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--app-line); display: block; }
.app-top .me { width: 20px; height: 20px; border-radius: 50%; background: #c56b36; color: #fff; font-size: 8px; display: grid; place-items: center; font-weight: 700; }
.app-body { flex: 1; min-height: 0; display: grid; }

/* inbox */
.inbox { grid-template-columns: 30% 1fr 26%; }
.conv-list { border-right: 1px solid var(--app-line); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.conv-search { margin: 8px; height: 22px; border-radius: 7px; border: 1px solid var(--app-line); display: flex; align-items: center; padding: 0 7px; gap: 5px; color: var(--app-muted); font-size: 8.5px; }
.conv-search svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; }
.conv-tabs { display: flex; gap: 4px; padding: 0 8px 6px; }
.conv-tabs span { font-size: 8px; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--app-line); color: var(--app-muted); }
.conv-tabs span.on { background: var(--app-soft); border-color: rgba(15, 166, 108, .35); color: var(--green-dark); font-weight: 600; }
.conv { display: flex; gap: 7px; padding: 7px 8px; border-bottom: 1px solid #f0f2f0; align-items: flex-start; }
.conv.active { background: #f2fbf6; box-shadow: inset 2px 0 0 var(--green); }
.av { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 8px; position: relative; }
.av .ch { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; padding: 1px; }
.conv .meta { min-width: 0; flex: 1; }
.conv .row { display: flex; justify-content: space-between; gap: 4px; }
.conv .name { font-weight: 700; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .time { color: var(--app-muted); font-size: 7.5px; flex: none; }
.conv .last { color: var(--app-muted); font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; font-size: 7.5px; font-weight: 600; border: 1px solid; margin-top: 3px; margin-right: 2px; }
.pill.g { background: #e9f9f1; color: var(--green-dark); border-color: rgba(15, 166, 108, .25); }
.pill.o { background: #fff0e7; color: #c56b36; border-color: rgba(242, 138, 81, .3); }
.pill.v { background: #eeebff; color: #6658c1; border-color: rgba(102, 88, 193, .25); }
.unread { background: var(--green); color: #fff; border-radius: 999px; font-size: 7.5px; font-weight: 700; padding: 0 5px; line-height: 13px; }

.chat { display: flex; flex-direction: column; min-width: 0; background: #eef2ef; }
.chat-head { background: #fff; border-bottom: 1px solid var(--app-line); padding: 7px 10px; display: flex; align-items: center; gap: 7px; }
.chat-head .who { flex: 1; }
.chat-head .who b { display: block; font-size: 9.5px; }
.chat-head .who small { color: var(--green); font-size: 7.5px; }
.chat-head .act { font-size: 8px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--app-line); background: #fff; }
.chat-head .act.p { background: var(--gradient); color: #fff; border: 0; font-weight: 600; }
.msgs { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; justify-content: flex-end; }
.msg { max-width: 72%; padding: 6px 8px; border-radius: 9px; font-size: 9px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); position: relative; }
.msg small { display: block; text-align: right; font-size: 7px; color: var(--app-muted); margin-top: 2px; }
.msg.in { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.msg.out { background: #d9f7e8; align-self: flex-end; border-top-right-radius: 3px; }
.msg.ai { background: #fff; border: 1px solid rgba(102, 88, 193, .3); align-self: flex-end; border-top-right-radius: 3px; }
.msg.ai::before { content: "Agente IA"; display: block; font-size: 7px; font-weight: 700; color: #6658c1; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.msg.note { background: #fff8e6; border: 1px dashed #e5c37a; align-self: center; max-width: 85%; font-size: 8.5px; color: #8a6514; }
.msg.note::before { content: "Nota interna · só a equipe vê"; display: block; font-size: 7px; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; }
.msg.audio { display: flex; align-items: center; gap: 6px; min-width: 140px; }
.msg.audio .play { width: 16px; height: 16px; border-radius: 50%; background: var(--green); flex: none; display: grid; place-items: center; }
.msg.audio .play::after { content: ""; border-left: 5px solid #fff; border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin-left: 1px; }
.wave { display: flex; gap: 1.5px; align-items: center; height: 14px; flex: 1; }
.wave i { width: 2px; border-radius: 2px; background: #8fbca6; display: block; }
.typing { align-self: flex-start; background: #fff; padding: 7px 9px; border-radius: 9px; display: flex; gap: 3px; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: #9aa69f; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; transform: translateY(-1px); } }
.composer { background: #fff; border-top: 1px solid var(--app-line); padding: 7px 10px; display: flex; align-items: center; gap: 6px; }
.composer .field { flex: 1; height: 22px; border-radius: 999px; background: var(--app-canvas); display: flex; align-items: center; padding: 0 9px; color: var(--app-muted); font-size: 8.5px; }
.composer .send { width: 22px; height: 22px; border-radius: 50%; background: var(--gradient); }
.composer .slash { font-size: 8px; color: var(--green-dark); background: var(--app-soft); padding: 2px 6px; border-radius: 999px; }

.contact { background: #fff; border-left: 1px solid var(--app-line); padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.contact .head { text-align: center; display: grid; justify-items: center; gap: 4px; }
.contact .head .av { width: 34px; height: 34px; font-size: 11px; }
.contact .head b { font-size: 10px; }
.contact .head small { font-size: 8px; color: var(--app-muted); }
.kv { display: grid; gap: 4px; }
.kv h6 { margin: 0; font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); font-weight: 700; }
.kv div { display: flex; justify-content: space-between; font-size: 8.5px; border-bottom: 1px solid #f0f2f0; padding-bottom: 3px; }
.kv div span { color: var(--app-muted); }
.appt { border: 1px solid var(--app-line); border-radius: 8px; padding: 6px; font-size: 8.5px; display: grid; gap: 3px; }
.appt .r { display: flex; gap: 4px; }
.appt .r em { font-style: normal; flex: 1; text-align: center; font-size: 7.5px; padding: 3px; border-radius: 5px; border: 1px solid var(--app-line); }
.appt .r em.ok { background: var(--gradient); color: #fff; border: 0; font-weight: 600; }

/* ---------- logos / canais ---------- */
.channels { padding: 60px 0 40px; }
.channels p { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 24px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.chip-logo { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 14px; color: var(--body); white-space: nowrap; }
.tile { width: 34px; height: 34px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; }
.tile img { width: 20px; height: 20px; }

/* ---------- statement (palavras acendem com o scroll) ---------- */
.statement { padding: 140px 0; }
.statement p { font: 800 clamp(28px, 4.4vw, 56px)/1.15 var(--display); letter-spacing: -.02em; margin: 0; max-width: 1050px; }
.statement .w { color: rgba(233, 245, 239, .14); transition: color .2s; }
.statement .w.hl { color: var(--green-bright); }

/* ---------- tour com tela fixa ---------- */
.tour { position: relative; padding: 40px 0 120px; }
.tour-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.tour-steps { display: flex; flex-direction: column; }
.step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: .25; transition: opacity .5s var(--ease); }
.step.active { opacity: 1; }
.step .num { font: 700 13px/1 var(--display); color: var(--green-bright); letter-spacing: .1em; }
.step h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.step p { color: var(--body); margin: 0; font-size: 17px; max-width: 460px; }
.step ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.step li { display: flex; gap: 10px; align-items: flex-start; color: var(--body); font-size: 15px; }
.step li svg { width: 18px; height: 18px; color: var(--green-bright); flex: none; margin-top: 3px; }
.step .shot { display: none; }
.tour-sticky { position: sticky; top: calc(50vh - 260px); height: 520px; }
.tour-frame { position: relative; height: 100%; border-radius: 22px; padding: 8px; background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(34, 201, 138, .25); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(34, 201, 138, .14); }
.screens { position: relative; height: 100%; border-radius: 15px; overflow: hidden; background: var(--app-canvas); }
.screen { position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.screen.active { opacity: 1; transform: none; }
.tour-progress { position: absolute; left: -32px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.tour-progress i { width: 4px; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, .12); transition: background .3s, height .3s; }
.tour-progress i.on { background: var(--green-bright); height: 38px; box-shadow: 0 0 12px rgba(34, 201, 138, .6); }

/* telas do tour */
.scr { height: 100%; display: flex; flex-direction: column; font-size: 10px; color: var(--app-ink); text-align: left; }
.scr-top { height: 40px; background: #fff; border-bottom: 1px solid var(--app-line); display: flex; align-items: center; gap: 8px; padding: 0 14px; flex: none; }
.scr-top b { font: 700 12px/1 var(--display); }
.scr-top .sp { flex: 1; }
.scr-top .btn-mini { font-size: 9px; padding: 5px 10px; border-radius: 7px; background: var(--gradient); color: #fff; font-weight: 600; }
.scr-top .tag { font-size: 8.5px; padding: 3px 8px; border-radius: 999px; background: var(--app-soft); color: var(--green-dark); font-weight: 600; }

/* agente IA */
.agent { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; min-height: 0; }
.card-a { background: #fff; border: 1px solid var(--app-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.card-a h5 { margin: 0; font: 700 11px/1.2 var(--display); display: flex; align-items: center; gap: 6px; }
.card-a h5 .ic { width: 22px; height: 22px; border-radius: 7px; background: var(--app-soft); display: grid; place-items: center; }
.card-a h5 .ic svg { width: 12px; height: 12px; stroke: var(--green); fill: none; stroke-width: 2; }
.field-a { display: grid; gap: 3px; }
.field-a span { font-size: 7.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--app-muted); }
.field-a div { border: 1px solid var(--app-line); border-radius: 7px; padding: 6px 8px; font-size: 9px; color: var(--app-body); background: #fafbfa; line-height: 1.45; }
.providers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.providers div { border: 1px solid var(--app-line); border-radius: 8px; padding: 6px 4px; display: grid; justify-items: center; gap: 4px; font-size: 8px; color: var(--app-muted); }
.providers div.on { border-color: var(--green); background: #f2fbf6; color: var(--green-dark); font-weight: 600; box-shadow: 0 0 0 3px rgba(15, 166, 108, .1); }
.providers img { width: 16px; height: 16px; }
.mcp-list { display: grid; gap: 5px; }
.mcp { display: flex; align-items: center; gap: 7px; border: 1px solid var(--app-line); border-radius: 8px; padding: 5px 7px; font-size: 9px; }
.mcp img { width: 14px; height: 14px; }
.mcp small { color: var(--app-muted); font-size: 7.5px; display: block; }
.mcp .tg { margin-left: auto; width: 20px; height: 11px; border-radius: 999px; background: var(--green); position: relative; flex: none; }
.mcp .tg::after { content: ""; position: absolute; right: 1.5px; top: 1.5px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.mcp .tg.off { background: #d6ddd8; }
.mcp .tg.off::after { right: auto; left: 1.5px; }
.chat-test { flex: 1; background: #eef2ef; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 5px; justify-content: flex-end; min-height: 0; }
.tool-call { align-self: flex-end; font-size: 7.5px; color: #6658c1; background: #eeebff; border-radius: 999px; padding: 2px 8px; font-weight: 600; }

/* automação */
.flow { flex: 1; position: relative; background-color: #f7f9f8; background-image: radial-gradient(#d8dfda 1px, transparent 1px); background-size: 14px 14px; overflow: hidden; }
.flow svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow svg.wires path { fill: none; stroke: #9fd8bf; stroke-width: 1.6; }
.flow svg.wires path.live { stroke: var(--green); stroke-dasharray: 5 5; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -10; } }
.node { position: absolute; width: 27%; background: #fff; border: 1px solid var(--app-line); border-radius: 10px; box-shadow: 0 4px 12px rgba(13, 31, 23, .07); overflow: hidden; font-size: 8.5px; }
.node header { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-weight: 700; font-size: 9px; border-bottom: 1px solid #f0f2f0; }
.node header i { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; flex: none; font-style: normal; color: #fff; font-size: 8px; }
.node p { margin: 0; padding: 6px 8px; color: var(--app-body); line-height: 1.4; }
.node .opts { display: grid; gap: 3px; padding: 0 8px 7px; }
.node .opts span { border: 1px solid var(--app-line); border-radius: 5px; padding: 2px 6px; font-size: 7.5px; }
.node.run { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 166, 108, .14), 0 6px 18px rgba(15, 166, 108, .18); }

/* crm */
.kanban { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; min-height: 0; }
.col { background: #eef2ef; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.col h6 { margin: 0 0 2px; font-size: 8px; letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted); display: flex; justify-content: space-between; }
.col h6 b { color: var(--app-ink); }
.deal { background: #fff; border: 1px solid var(--app-line); border-radius: 8px; padding: 7px; display: grid; gap: 3px; font-size: 8.5px; box-shadow: 0 1px 2px rgba(13, 31, 23, .05); }
.deal b { font-size: 9px; }
.deal .val { font: 700 10px/1 var(--display); color: var(--green-dark); font-variant-numeric: tabular-nums; }
.deal .ad { font-size: 7px; color: #1877f2; display: flex; gap: 3px; align-items: center; }
.deal.moving { animation: hop 3.2s var(--ease) infinite; border-color: var(--green); }
@keyframes hop { 0%, 30% { transform: none; } 50%, 80% { transform: translateX(calc(100% + 26px)); } 100% { transform: none; } }

/* ligação */
.call { flex: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; padding: 14px; min-height: 0; }
.phone-card { background: linear-gradient(170deg, #0f2419, #08150f); border-radius: 14px; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; position: relative; overflow: hidden; }
.phone-card .ring { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; position: relative; }
.phone-card .ring::before, .phone-card .ring::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(34, 201, 138, .5); animation: ripple 2.2s ease-out infinite; }
.phone-card .ring::after { animation-delay: 1.1s; }
@keyframes ripple { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.phone-card .ring svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; }
.phone-card b { font: 700 13px/1 var(--display); }
.phone-card small { color: var(--muted); font-size: 9px; }
.phone-card .timer { font: 700 18px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--green-mint); }
.bars { display: flex; gap: 3px; align-items: center; height: 26px; }
.bars i { width: 3px; border-radius: 3px; background: var(--green-bright); animation: eq 1s ease-in-out infinite; }
@keyframes eq { 50% { transform: scaleY(.3); } }
.transcript { background: #fff; border: 1px solid var(--app-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.transcript h5 { margin: 0; font: 700 10px/1 var(--display); display: flex; justify-content: space-between; }
.line-t { font-size: 9px; line-height: 1.45; padding: 6px 8px; border-radius: 8px; background: var(--app-canvas); }
.line-t b { display: block; font-size: 7.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--app-muted); }
.line-t.ai { background: #f2fbf6; }
.line-t.ai b { color: var(--green-dark); }

/* relatórios */
.reports { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr; gap: 10px; padding: 12px; min-height: 0; }
.kpi { background: #fff; border: 1px solid var(--app-line); border-radius: 10px; padding: 9px; display: grid; gap: 4px; }
.kpi span { font-size: 7.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--app-muted); font-weight: 700; }
.kpi b { font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.kpi em { font-style: normal; font-size: 8px; color: var(--green-dark); font-weight: 600; }
.chart { grid-column: span 3; background: #fff; border: 1px solid var(--app-line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.chart h5, .ads h5 { margin: 0; font: 700 10px/1 var(--display); }
.bar-row { flex: 1; display: flex; align-items: flex-end; gap: 6%; padding: 0 4px; border-bottom: 1px solid var(--app-line); min-height: 0; }
.bar-row div { flex: 1; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.bar-row i { flex: 1; border-radius: 4px 4px 0 0; background: var(--gradient); transform-origin: bottom; }
.bar-row i.b { background: #c9ece0; }
.ads { background: #fff; border: 1px solid var(--app-line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.ads .r { display: flex; justify-content: space-between; font-size: 8.5px; border-bottom: 1px solid #f0f2f0; padding-bottom: 4px; }
.ads .r b { font-variant-numeric: tabular-nums; }

/* ---------- horizontal: construtor de fluxos ---------- */
.hscroll { position: relative; overflow: hidden; }
.hscroll-head { padding-top: 120px; }
.hscroll-pin { height: 100vh; display: flex; align-items: center; }
.hscroll-track { display: flex; gap: 28px; padding: 0 var(--gutter); will-change: transform; align-items: center; }
.hcard { flex: none; width: min(380px, 78vw); border-radius: 22px; padding: 26px; background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; position: relative; min-height: 340px; }
.hcard::after { content: ""; position: absolute; right: -28px; top: 50%; width: 28px; height: 2px; background: linear-gradient(90deg, var(--green-bright), transparent); }
.hcard:last-child::after { display: none; }
.hcard .k { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(34, 201, 138, .12); border: 1px solid rgba(34, 201, 138, .3); }
.hcard .k svg { width: 22px; height: 22px; stroke: var(--green-bright); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hcard small { font: 700 11.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.hcard p { margin: 0; color: var(--body); font-size: 15px; }
.hcard .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.hcard .chips span { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.hcard.intro { background: none; border: 0; width: min(440px, 84vw); justify-content: center; }
.hcard.intro::after { display: none; }

/* ---------- conectores (órbita) ---------- */
.connect { padding: 140px 0; }
.connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.connect-copy { display: grid; gap: 20px; }
.connect-copy .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.stat { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: rgba(255, 255, 255, .03); }
.stat b { display: block; font: 800 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--muted); }
.orbit { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; margin: 0 auto; }
.orbit .ringline { position: absolute; border-radius: 50%; border: 1px dashed rgba(34, 201, 138, .22); }
.orbit .r1 { inset: 16%; }
.orbit .r2 { inset: 0; }
.orbit .core { position: absolute; inset: 38%; border-radius: 30%; background: var(--gradient); display: grid; place-items: center; box-shadow: 0 0 80px rgba(34, 201, 138, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
.orbit .core svg { width: 46%; height: 46%; }
.orbit .spin { position: absolute; inset: 0; }
.orbit .sat { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 15px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.orbit .sat img { width: 26px; height: 26px; }

/* ---------- segmentos ---------- */
.segments { padding: 40px 0 140px; }
.seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.seg { border-radius: 22px; padding: 28px; border: 1px solid var(--line); background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); display: grid; gap: 12px; align-content: start; transition: border-color .25s, transform .25s var(--ease); }
.seg:hover { border-color: rgba(34, 201, 138, .4); transform: translateY(-4px); }
.seg .k { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(34, 201, 138, .12); }
.seg .k svg { width: 22px; height: 22px; stroke: var(--green-bright); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.seg p { margin: 0; color: var(--body); font-size: 15px; }

/* ---------- segurança ---------- */
.security { padding: 0 0 140px; }
.sec-box { border-radius: 28px; border: 1px solid rgba(34, 201, 138, .25); background: radial-gradient(600px 300px at 0% 0%, rgba(34, 201, 138, .12), transparent), linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sec-item { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft); }
.sec-item b { font: 700 15px/1.2 var(--display); display: flex; align-items: center; gap: 8px; }
.sec-item b svg { width: 17px; height: 17px; stroke: var(--green-bright); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sec-item span { font-size: 13.5px; color: var(--muted); }

/* ---------- faq ---------- */
.faq { padding: 0 0 140px; }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .025); transition: border-color .2s; }
.faq details[open] { border-color: rgba(34, 201, 138, .35); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font: 700 16px/1.3 var(--display); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--green-bright); transition: transform .25s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--body); font-size: 15px; }

/* ---------- cta ---------- */
.cta { padding: 0 0 120px; }
.cta-box { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(40px, 7vw, 88px) var(--gutter); text-align: center; display: grid; justify-items: center; gap: 22px; background: linear-gradient(135deg, #0c3a27, #07251f 60%, #062019); border: 1px solid rgba(34, 201, 138, .35); }
.cta-box::before { content: ""; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 201, 138, .35), transparent); top: -300px; left: 50%; transform: translateX(-50%); }
.cta-box > * { position: relative; }
.cta-box .lead { margin: 0 auto; }

/* ---------- rodapé ---------- */
footer { border-top: 1px solid var(--line-soft); padding: 48px 0; color: var(--muted); font-size: 14px; }
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot nav a:hover { color: var(--ink); }

/* ---------- revelação ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.no-js .reveal, .reduced .reveal { opacity: 1; transform: none; }

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav.open .nav-links { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 4px; padding: 12px var(--gutter) 20px; background: rgba(6, 17, 12, .96); border-bottom: 1px solid var(--line); }
  .nav.open .nav-links a { padding: 12px 0; font-size: 16px; }
  .nav-cta .btn-ghost { display: none; }
  .tour-grid { grid-template-columns: 1fr; gap: 0; }
  .tour-sticky { display: none; }
  .step { min-height: auto; padding: 48px 0; opacity: 1; }
  .step .shot { display: block; height: 380px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(34, 201, 138, .25); background: var(--app-canvas); margin-top: 12px; position: relative; }
  .step .shot .screen { opacity: 1; transform: none; }
  .connect-grid, .sec-box { grid-template-columns: 1fr; }
  .seg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding-top: 120px; }
  .hero-stage { margin-top: 48px; }
  .device { padding: 6px; border-radius: 14px; }
  .device-screen { aspect-ratio: 9 / 13; }
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .inbox { grid-template-columns: 1fr; }
  .conv-list, .contact { display: none; }
  .sec-list { grid-template-columns: 1fr; }
  .connect-copy .stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .stat { padding: 14px 10px; }
  .stat b { font-size: 24px; }
  .agent { grid-template-columns: 1fr; overflow: hidden; }
  .agent .card-a:last-child { display: none; }
  .call { grid-template-columns: 1fr; }
  .call .transcript { display: none; }
  .kanban { grid-template-columns: 1fr 1fr; }
  .kanban .col:nth-child(n+3) { display: none; }
  .reports { grid-template-columns: 1fr 1fr; }
  .reports .kpi:nth-child(n+3), .reports .ads { display: none; }
  .chart { grid-column: span 2; }
  .node { width: 40%; }
  .hcard { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .3s !important; }
  .marquee-track { animation: none; }
}

/* barras do relatório crescem quando a tela entra */
.screen .bar-row i { transform: scaleY(0); transition: transform .9s var(--ease); }
.screen.active .bar-row i { transform: scaleY(1); transition-delay: .25s; }
.screen.active .bar-row div:nth-child(2) i { transition-delay: .32s; }
.screen.active .bar-row div:nth-child(3) i { transition-delay: .39s; }
.screen.active .bar-row div:nth-child(4) i { transition-delay: .46s; }
.screen.active .bar-row div:nth-child(5) i { transition-delay: .53s; }

/* ajustes de celular */
@media (max-width: 640px) {
  .scr .inbox { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .nav-cta .btn-primary { display: none; }
}