/* =====================================================================
  INTEGRAMAX — styles.css

  Mapa do arquivo:
    1. TOKENS ......... cores, fontes, espaçamentos (mude a marca aqui)
    2. BASE ........... reset, tipografia, botões, fotos (.ph), símbolo decorativo
    3. HEADER ......... fixo, sempre visível; "bolha" que segue o mouse no menu
    4. HERO ........... monitor de câmeras, miniaturas, caixas de detecção
    5. TRANSIÇÕES ..... curvas entre seções (.edge) e degradês
    6. SOBRE .......... INTEGRA + MAX, símbolo ao fundo, foto e números
    7. SOLUÇÕES ....... abas
    8. INTEGRAÇÃO ..... diagrama
    9. IA ............. visualizador dos analíticos
   10. SEGMENTOS
   11. PROCESSO ....... escada com linha desenhada
   12. MARCAS ......... carrossel contínuo
   13. FAQ ............ conversa
   14. CONTATO ........ símbolo central, passos e formulário
   15. FOOTER + WhatsApp flutuante
   16. ANIMAÇÕES DE ENTRADA
   17. RESPONSIVO
  ===================================================================== */

/* 1. TOKENS ============================================================ */
:root {
  --ink: #070F17;
  --ink-2: #0B1620;
  --ink-3: #12212D;
  --line-d: rgba(170, 200, 220, .13);
  --line-d2: rgba(170, 200, 220, .26);
  --text-d: #E9EEF1;
  --muted-d: #93A4B0;

  --paper: #F3F4F1;
  --paper-2: #E6EAE7;
  --white: #FFFFFF;
  --line-l: rgba(11, 42, 68, .13);
  --navy: #0B2A44;
  --muted-l: #546877;

  --blue: #2F8DB8;
  --blue-hi: #5FC0E8;
  --rec: #F0484A;
  --ok: #34C98A;
  --warn: #F2A324;
  --wa: #25D366;

  --f-display: "Archivo", "Arial Narrow", sans-serif;
  --f-body: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 44px);
  --sec: clamp(88px, 10vw, 140px);
  --r: 8px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --hdr-h: 72px;
}

/* 2. BASE ============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text-d); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 740; font-stretch: 108%; line-height: 1.02; letter-spacing: -.028em; }
h3 { font-size: 21px; letter-spacing: -.01em; font-stretch: 104%; }
p { margin: 0; }
::selection { background: var(--blue); color: #fff; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--f-mono); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--navy); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 4px; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 20px; }
.eyebrow--light { color: var(--blue-hi); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; font: 600 15px/1 var(--f-body); white-space: nowrap; isolation: isolate; overflow: hidden; transition: background .35s var(--ease), border-color .35s, color .35s, box-shadow .45s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%); opacity: 0; transition: opacity .35s; }
.btn:hover::before { opacity: 1; }
.btn .ic { transition: transform .45s var(--spring); }
.btn:hover .ic { transform: translateX(4px); }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 60px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #3698C5; box-shadow: 0 14px 30px -14px rgba(47, 141, 184, .7); }
.btn--ghost { border-color: rgba(255, 255, 255, .32); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: #12395A; }
.btn--wa { background: var(--wa); color: #05301A; }
.btn--wa:hover { background: #2EE072; box-shadow: 0 16px 34px -16px rgba(37, 211, 102, .7); }
.btn--wa:hover .ic { transform: rotate(-10deg) scale(1.1); }
[data-magnet] { transition: transform .6s var(--spring), background .35s, border-color .35s, color .35s, box-shadow .45s var(--ease); will-change: transform; }

.ph { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: var(--paper-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--43 { aspect-ratio: 4 / 3; }
.ph--169 { aspect-ratio: 16 / 9; }
.ph.is-empty img { display: none; }
.ph.is-empty::after { content: attr(data-file); position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px var(--f-mono); color: rgba(11, 42, 68, .4); }

/* símbolo da marca usado como elemento de fundo */
.deco-mark { position: absolute; pointer-events: none; will-change: transform; }

/* 3. HEADER ============================================================ */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h); border-bottom: 1px solid transparent; transition: background .5s var(--ease), border-color .5s, backdrop-filter .5s; }
.hdr.is-solid { background: rgba(7, 15, 23, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: rgba(170, 200, 220, .1); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.hdr__logo { transition: opacity .3s; }
.hdr__logo:hover { opacity: .82; }
.hdr__logo img { height: 30px; width: auto; }
.nav { position: relative; display: flex; align-items: center; margin-left: auto; }
.nav__blob { position: absolute; left: 0; top: 50%; height: 38px; width: 40px; margin-top: -19px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), background .35s; will-change: transform, width; }
.nav__blob.is-on { opacity: 1; }
.nav.is-hover .nav__blob { background: rgba(95, 192, 232, .18); }
.nav a { position: relative; z-index: 1; padding: 9px 15px; font-size: 15px; color: rgba(233, 238, 241, .72); transition: color .3s; }
.nav a:hover, .nav a.is-active { color: #fff; }
.nav__cta-m, .hdr__burger { display: none; }

/* 4. HERO ============================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #0C1418; }
.vms { position: absolute; inset: 0; }
.vms__feeds, .feed { position: absolute; inset: 0; }
.feed { opacity: 0; transition: opacity .9s var(--ease); container-type: size; }
.feed.is-on { opacity: 1; }
.feed > img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(.85); transform: scale(1.06); transition: transform 7s linear; }
.feed.is-on > img { transform: scale(1); }
.feed__dets { position: absolute; left: 50%; top: 50%; width: max(100cqw, 160cqh); height: max(100cqh, 62.5cqw); transform: translate(-50%, -50%) scale(1.06); transition: transform 7s linear; }
.feed.is-on .feed__dets { transform: translate(-50%, -50%) scale(1); }
.feed.no-signal { background: #0B1013; }
.feed.no-signal > img { display: none; }
.feed.no-signal::after { content: "SEM SINAL"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 14px var(--f-mono); letter-spacing: .3em; color: rgba(233, 238, 241, .5); }
.vms__noise { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .45)); }
.vms__osd { position: absolute; z-index: 3; top: calc(var(--hdr-h) + 18px); right: var(--pad); display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.osd-cam { padding: 5px 7px; border-radius: 3px; background: rgba(0, 0, 0, .45); }
.osd-rec { display: inline-flex; align-items: center; gap: 6px; }
.osd-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7, 15, 23, .94) 0%, rgba(7, 15, 23, .78) 34%, rgba(7, 15, 23, .2) 66%, rgba(7, 15, 23, .1) 100%), linear-gradient(0deg, rgba(7, 15, 23, .8) 0%, transparent 36%), linear-gradient(180deg, rgba(7, 15, 23, .6) 0%, transparent 22%); }
.hero__in { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; padding-top: calc(var(--hdr-h) + 80px); padding-bottom: 150px; pointer-events: none; }
.hero__in > * { pointer-events: auto; }
.hero__copy { max-width: 700px; }
.hero__pre { font-size: 15px; color: rgba(233, 238, 241, .7); margin-bottom: 22px; }
.hero__title { font-size: clamp(40px, 5vw, 74px); font-weight: 760; line-height: .98; letter-spacing: -.035em; }
.hero__lead { margin-top: 26px; max-width: 540px; font-size: 18px; color: rgba(233, 238, 241, .78); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.thumbs { display: flex; gap: 10px; }
.thumb { position: relative; width: 132px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: rgba(233, 238, 241, .65); transition: transform .5s var(--spring), color .3s; }
.thumb:hover { transform: translateY(-4px); }
.thumb__img { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #0B1013; outline: 1px solid rgba(255, 255, 255, .18); outline-offset: -1px; transition: outline-color .3s; }
.thumb__img img { width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: opacity .3s, transform .6s var(--ease); }
.thumb:hover .thumb__img img { transform: scale(1.06); }
.thumb__img.no-signal::after { content: "SEM SINAL"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 8.5px var(--f-mono); letter-spacing: .2em; color: rgba(255, 255, 255, .35); }
.thumb b { display: block; margin-top: 8px; font: 500 11px var(--f-mono); letter-spacing: .04em; }
.thumb small { display: block; font-size: 12.5px; }
.thumb__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-hi); transform: scaleX(0); transform-origin: left; }
.thumb[aria-selected="true"] { color: #fff; }
.thumb[aria-selected="true"] .thumb__img { outline: 2px solid var(--blue-hi); outline-offset: -2px; }
.thumb[aria-selected="true"] .thumb__img img, .thumb:hover .thumb__img img { opacity: 1; }
.thumb[aria-selected="true"] .thumb__bar { animation: bar var(--dur, 6s) linear forwards; }
@keyframes bar { to { transform: scaleX(1); } }

/* caixas de detecção (topo e visualizador de IA) */
.dets { position: absolute; inset: 0; pointer-events: none; }
.det { position: absolute; border: 1.5px solid var(--blue-hi); background: rgba(95, 192, 232, .06); opacity: 0; transform: scale(1.18); animation: detin .5s var(--ease) forwards, drift 3.4s ease-in-out infinite alternate; animation-delay: var(--d, .4s), calc(var(--d, .4s) + .5s); }
.det::before, .det::after { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid #fff; }
.det::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.det::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.det em { position: absolute; left: -1.5px; bottom: calc(100% + 1px); white-space: nowrap; padding: 4px 6px; font: 600 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: .03em; background: var(--blue-hi); color: #04121D; }
.det--ok { border-color: var(--ok); background: rgba(52, 201, 138, .07); } .det--ok em { background: var(--ok); }
.det--alert { border-color: var(--rec); background: rgba(240, 72, 74, .1); } .det--alert em { background: var(--rec); color: #fff; }
.det--warn { border-color: var(--warn); background: rgba(242, 163, 36, .08); } .det--warn em { background: var(--warn); }
@keyframes detin { to { opacity: 1; transform: scale(1); } }
@keyframes drift { from { translate: 0 0; } to { translate: var(--dx, 3px) var(--dy, -2px); } }
.zone { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; animation: detin .6s var(--ease) .2s forwards; }
.zone polygon, .zone line { fill: rgba(95, 192, 232, .08); stroke: var(--blue-hi); stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.zone.is-alert polygon, .zone.is-alert line { stroke: var(--rec); fill: rgba(240, 72, 74, .12); }

/* 5. TRANSIÇÕES ======================================================= */
/* curva que "sobe" sobre a seção anterior; cada uma tem um desenho diferente */
.edge { position: absolute; left: 0; top: 1px; width: 100%; height: 120px; transform: translateY(-100%); pointer-events: none; z-index: 2; }
.edge path { fill: var(--paper); }

/* 6. SOBRE ============================================================= */
.about, .sol, .seg, .proc, .brands, .faq { background: var(--paper); color: var(--navy); }
.about { position: relative; z-index: 2; padding: calc(var(--sec) - 20px) 0 var(--sec); overflow-x: clip; }
.about__mark { right: -16vw; top: -40px; width: min(70vw, 1040px); height: min(70vw, 1040px); color: var(--navy); opacity: .05; -webkit-mask-image: radial-gradient(circle at 40% 45%, #000 40%, transparent 72%); mask-image: radial-gradient(circle at 40% 45%, #000 40%, transparent 72%); }
.about__in { position: relative; }
.mf__row { display: grid; grid-template-columns: auto minmax(0, 400px); justify-content: space-between; align-items: end; gap: 20px 48px; padding: clamp(18px, 3vw, 34px) 0; }
.mf__row--alt { grid-template-columns: minmax(0, 400px) auto; }
.mf__row--alt .mf__word { text-align: right; }
.mf__word { font-size: clamp(56px, 10vw, 150px); font-stretch: 125%; font-weight: 800; letter-spacing: -.045em; line-height: .84; color: var(--navy); }
.mf__word--out { font-weight: 500; color: transparent; -webkit-text-stroke: 1.5px var(--navy); transition: color .6s var(--ease); }
.mf__row--alt:hover .mf__word--out { color: rgba(47, 141, 184, .12); }
.mf__txt { padding-bottom: .3em; }
.mf__txt h3 { font-size: 20px; margin-bottom: 10px; }
.mf__txt p { color: var(--muted-l); }
.about__grid { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.about__grid .ph { box-shadow: 0 40px 80px -50px rgba(11, 42, 68, .5); }
.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.stats > div { position: relative; padding-left: 18px; }
.stats > div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(var(--blue), transparent); }
.stats dt { font-size: 14px; color: var(--muted-l); }
.stats dd { margin: 10px 0 0; font: 760 clamp(40px, 4.2vw, 58px)/1 var(--f-display); font-stretch: 110%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

/* 7. SOLUÇÕES ========================================================== */
/* o fim da seção escurece aos poucos até a Integração */
.sol { padding: 20px 0 calc(var(--sec) + 220px); background: linear-gradient(180deg, var(--paper) 0, var(--paper) calc(100% - 300px), #DCE1DF calc(100% - 240px), #A3AEB4 calc(100% - 165px), #3D4C57 calc(100% - 80px), var(--ink) 100%); }
.sol__hd { display: grid; grid-template-columns: auto minmax(0, 380px); justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: clamp(40px, 5vw, 64px); }
.sol__hd h2 { font-size: clamp(48px, 6.4vw, 96px); font-stretch: 112%; letter-spacing: -.04em; }
.sol__hd p { color: var(--muted-l); padding-bottom: 10px; }
.tabs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tabs__list { display: flex; flex-direction: column; position: sticky; top: calc(var(--hdr-h) + 24px); }
.tabs__list button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 0; text-align: left; cursor: pointer; background: none; border: 0; color: #7D8F9C; font: 650 clamp(18px, 1.55vw, 22px)/1.2 var(--f-display); font-stretch: 104%; letter-spacing: -.012em; transition: color .3s, padding .55s var(--spring); }
.tabs__list button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-l); }
.tabs__list button::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); z-index: 1; }
.tabs__list button .ic { opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .5s var(--spring); color: var(--blue); }
.tabs__list button:hover { color: var(--navy); padding-left: 6px; }
.tabs__list button:hover .ic { opacity: .5; transform: none; }
.tabs__list button[aria-selected="true"] { color: var(--navy); padding-left: 12px; }
.tabs__list button[aria-selected="true"]::before { transform: scaleX(1); }
.tabs__list button[aria-selected="true"] .ic { opacity: 1; transform: none; }
.panel { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 var(--line-l), 0 40px 80px -60px rgba(11, 42, 68, .45); }
.panel .ph { border-radius: 0; }
.panel.is-in .ph img { animation: zoomout 1.2s var(--ease) both; }
.panel.is-in .panel__body > * { animation: up .7s var(--ease) both; }
.panel.is-in .panel__body > *:nth-child(2) { animation-delay: .06s; }
.panel.is-in .panel__body > *:nth-child(3) { animation-delay: .12s; }
@keyframes zoomout { from { transform: scale(1.12); } }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }
.panel__body { padding: clamp(26px, 3vw, 40px); }
.panel h3 { font-size: clamp(24px, 2.2vw, 30px); }
.panel__body > p { margin-top: 12px; color: var(--muted-l); }
.list { list-style: none; margin: 22px 0 0; padding: 0; columns: 2; column-gap: 32px; }
.list li { position: relative; break-inside: avoid; padding: 9px 0 9px 22px; font-size: 15.5px; }
.list li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 1.5px; background: var(--blue); }
.ph--cam { background: #0C1418; }

/* controle de acesso: onde o sistema roda */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.modes__i { padding: 14px 14px 16px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-l); transition: box-shadow .35s, transform .5s var(--spring), background .35s; }
.modes__i .ic { width: 22px; height: 22px; color: var(--blue); margin-bottom: 10px; }
.modes__i b { display: block; font: 700 16px/1.2 var(--f-display); font-stretch: 105%; }
.modes__i span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted-l); }
@media (hover: hover) { .modes__i:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(47, 141, 184, .5), 0 16px 30px -22px rgba(11, 42, 68, .5); transform: translateY(-3px); } }

/* sensores IoT e MCP: painel desenhado */
.iot { background: radial-gradient(ellipse 70% 60% at 70% 20%, rgba(47, 141, 184, .22), transparent 70%), #0A1722; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 2.4vw, 24px); gap: 12px; }
.iot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.iot__s { position: relative; padding: 12px 12px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(170, 200, 220, .12); color: var(--text-d); transition: box-shadow .4s, background .4s; }
.iot__s .ic { width: 18px; height: 18px; color: var(--blue-hi); }
.iot__s small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--muted-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iot__s b { display: block; margin-top: 2px; font: 600 clamp(14px, 1.5vw, 18px)/1.2 var(--f-mono); letter-spacing: -.01em; }
.iot__s::after { content: ""; position: absolute; right: 10px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 201, 138, .15); }
.iot__s.is-ping { background: rgba(95, 192, 232, .1); box-shadow: inset 0 0 0 1px rgba(95, 192, 232, .5); }
.iot__s.is-warn::after { background: var(--warn); box-shadow: 0 0 0 3px rgba(242, 163, 36, .2); }
.iot__mcp { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; padding: 12px 14px; border-radius: 10px; background: rgba(5, 10, 14, .6); box-shadow: inset 0 0 0 1px rgba(170, 200, 220, .12); font-size: 13.5px; }
.iot__tag { grid-row: span 2; align-self: start; padding: 3px 6px; border-radius: 4px; background: var(--blue); color: #fff; font-size: 10.5px; letter-spacing: .06em; }
.iot__q { color: #fff; }
.iot__q::before { content: "› "; color: var(--blue-hi); }
.iot__a { color: var(--muted-d); min-height: 1.4em; }
.iot__a.is-typing::after { content: "▍"; color: var(--blue-hi); animation: blink .8s steps(2, jump-none) infinite; }

/* deslizar entre as soluções com o dedo (celular e tablet) */
.tabs__panels { position: relative; touch-action: pan-y; }
.panel.from-right { animation: fromR .55s var(--ease) both; }
.panel.from-left { animation: fromL .55s var(--ease) both; }
@keyframes fromR { from { opacity: .3; transform: translateX(60px); } }
@keyframes fromL { from { opacity: .3; transform: translateX(-60px); } }
.tabs__dots { display: none; }
@media (max-width: 960px) {
  .tabs__dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; }
  .tabs__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(11, 42, 68, .2); cursor: pointer; transition: width .45s var(--spring), background .3s; }
  .tabs__dots button[aria-current="true"] { width: 26px; background: var(--navy); }
  .tabs__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted-l); }
  .tabs__hint i { display: inline-block; width: 18px; height: 1.5px; background: currentColor; animation: nudge 1.8s var(--ease) infinite; }
  @keyframes nudge { 50% { transform: translateX(6px); } }
}
@media (max-width: 640px) {
  .modes { grid-template-columns: 1fr; gap: 8px; }
  .modes__i { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; padding: 12px 14px; }
  .modes__i .ic { grid-row: span 2; margin: 2px 0 0; }
  .modes__i span { margin-top: 2px; }
  .iot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .iot__s:nth-child(n+5) { display: none; }
  .iot__s { padding: 10px; }
  .iot__mcp { font-size: 12.5px; padding: 10px 12px; }
  .iot.ph--169 { aspect-ratio: auto; }
}

/* 8. INTEGRAÇÃO ======================================================== */
.integ { position: relative; padding: 40px 0 var(--sec); background: radial-gradient(ellipse 60% 40% at 50% 62%, rgba(47, 141, 184, .12), transparent 70%), var(--ink); }
.integ__hd { text-align: center; max-width: 860px; margin: 0 auto clamp(48px, 6vw, 80px); }
.integ__hd h2 { font-size: clamp(34px, 4.2vw, 60px); }
.integ__hd > p:last-child { margin: 22px auto 0; max-width: 560px; color: var(--muted-d); font-size: 18px; }
.dia { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .8fr) minmax(0, 1fr); align-items: center; }
.dia__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.dia__lines path { fill: none; stroke: var(--line-d2); stroke-width: 1.2; transition: stroke .3s; }
.dia__lines path.is-on { stroke: var(--blue-hi); }
.dia__lines circle { fill: var(--blue-hi); }
.dia__col { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 2; }
.dia__col li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 15px 18px; border: 1px solid var(--line-d); border-radius: 12px; background: var(--ink-2); transition: border-color .3s, transform .55s var(--spring), background .3s; }
.dia__col li .ic { grid-row: span 2; width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: var(--ink-3); color: var(--blue-hi); transition: transform .5s var(--spring); }
.dia__col li b { font-size: 15.5px; font-weight: 600; }
.dia__col li small { font-size: 13px; color: var(--muted-d); }
.dia__col li.is-on { border-color: var(--blue-hi); background: #0E1D29; }
.dia__col li.is-on .ic { transform: scale(1.08); }
.dia__col--in li.is-on { transform: translateX(6px); }
.dia__col--out li.is-on { transform: translateX(-6px); }
.dia__core { position: relative; z-index: 2; display: grid; place-items: center; min-height: 360px; }
.core { position: relative; width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--line-d2); }
.core__ring { position: absolute; inset: -18px; border-radius: 50%; border: 1px dashed rgba(95, 192, 232, .3); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.core__mark { width: 78px; height: 78px; color: var(--blue); }
.core.is-pulse { animation: pulse .7s var(--ease); }
@keyframes pulse { 40% { border-color: var(--blue-hi); transform: scale(1.03); } }

/* 9. IA ================================================================ */
.ia { position: relative; padding: calc(var(--sec) - 20px) 0 calc(var(--sec) + 100px); background: linear-gradient(180deg, var(--ink) 0, var(--ink-2) 240px); }
.viewer { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.viewer__side h2 { font-size: clamp(34px, 3.6vw, 52px); }
.viewer__lead { margin: 18px 0 30px; color: var(--muted-d); }
.viewer__list { list-style: none; margin: 0; padding: 0; }
.viewer__list button { position: relative; width: 100%; display: grid; grid-template-columns: 22px 1fr; padding: 13px 0; text-align: left; background: none; border: 0; cursor: pointer; color: var(--muted-d); transition: color .3s; }
.viewer__list button::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; border: 1.5px solid var(--line-d2); transition: background .3s, border-color .3s, transform .5s var(--spring); }
.viewer__list b { font: 650 19px/1.3 var(--f-display); font-stretch: 104%; letter-spacing: -.01em; transition: transform .5s var(--spring); }
.viewer__list p { grid-column: 2; max-height: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.55; transition: max-height .6s var(--ease), opacity .4s, margin .4s; }
.viewer__list button:hover { color: #fff; }
.viewer__list button:hover b { transform: translateX(3px); }
.viewer__list button[aria-selected="true"] { color: #fff; }
.viewer__list button[aria-selected="true"]::before { background: var(--blue-hi); border-color: var(--blue-hi); transform: scale(1.3); }
.viewer__list button[aria-selected="true"] p { max-height: 140px; opacity: 1; margin-top: 6px; color: var(--muted-d); }
.viewer__list .bar { position: absolute; left: 22px; right: 0; bottom: 0; height: 1px; background: var(--line-d); overflow: hidden; }
.viewer__list .bar::after { content: ""; position: absolute; inset: 0; background: var(--blue-hi); transform: scaleX(0); transform-origin: left; }
.viewer__list button[aria-selected="true"] .bar::after { animation: bar var(--dur, 7s) linear forwards; }
.viewer.is-paused .viewer__list .bar::after { animation: none; }
.viewer__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #0B1013; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .8); }
.viewer__img { position: absolute; inset: 0; }
.viewer__img .shot { position: absolute; inset: 0; animation: fadein .6s var(--ease); }
.viewer__img .shot > img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(.85); }
.viewer__img .shot.no-signal::after { content: "SEM SINAL"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 13px var(--f-mono); letter-spacing: .3em; color: rgba(255, 255, 255, .4); }
.viewer__img .shot.no-signal > img { display: none; }
@keyframes fadein { from { opacity: 0; } }
.viewer__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); }
.viewer__osd { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; font: 500 11.5px/1 var(--f-mono); letter-spacing: .05em; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.viewer__readout { position: absolute; z-index: 2; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 8px 10px; border-radius: 4px; background: rgba(5, 10, 14, .78); font-size: 12px; letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__readout:empty { display: none; }
.viewer__readout b { font-weight: 500; color: var(--blue-hi); }

/* 10. SEGMENTOS ======================================================== */
.seg { position: relative; z-index: 2; padding: 20px 0 var(--sec); }
.seg__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.seg__hd { position: sticky; top: calc(var(--hdr-h) + 40px); }
.seg__hd h2 { font-size: clamp(48px, 6vw, 92px); font-stretch: 114%; letter-spacing: -.045em; line-height: .92; }
.seg__hd p { margin-top: 22px; color: var(--muted-l); max-width: 340px; }
.seg__list { list-style: none; margin: 0; padding: 0; }
.seg__list li { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: baseline; padding: 24px 12px 24px 0; transition: padding .55s var(--spring); }
.seg__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--line-l), rgba(11, 42, 68, .04)); }
.seg__list li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--blue); transform: scale(0); transition: transform .45s var(--spring); }
.seg__list b { font: 700 clamp(20px, 1.9vw, 25px)/1.15 var(--f-display); font-stretch: 106%; letter-spacing: -.015em; transition: color .3s; }
.seg__list span { font-size: 15.5px; color: var(--muted-l); }
.seg__list li:hover { padding-left: 14px; }
.seg__list li:hover::before { transform: scale(1); left: 0; }
.seg__list li:hover b { color: var(--blue); }

/* 11. PROCESSO ========================================================= */
.proc { padding: 0 0 clamp(64px, 8vw, 110px); }
.proc__title { font-size: clamp(30px, 3.4vw, 50px); max-width: 780px; }
.steps { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.steps__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.steps__line path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
#stepsbg { stroke: var(--line-l); stroke-dasharray: 3 6; }
#stepsfg { stroke: var(--blue); }
.steps ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.steps li { position: relative; padding-top: 34px; }
.steps li:nth-child(1) { margin-top: 184px; } .steps li:nth-child(2) { margin-top: 138px; } .steps li:nth-child(3) { margin-top: 92px; } .steps li:nth-child(4) { margin-top: 46px; }
.steps__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--navy); transition: background .4s, border-color .4s, transform .5s var(--spring); }
.steps li.is-lit .steps__dot { background: var(--blue); border-color: var(--blue); transform: scale(1.2); }
.steps h3 { font-size: 22px; }
.steps p { margin-top: 10px; font-size: 15px; color: var(--muted-l); }

/* 12. MARCAS =========================================================== */
.brands { padding: 0 0 clamp(80px, 9vw, 130px); overflow: hidden; }
.brands__hd { display: grid; grid-template-columns: auto minmax(0, 380px); justify-content: space-between; align-items: end; gap: 16px 48px; margin-bottom: 36px; }
.brands__hd h2 { font-size: clamp(28px, 3vw, 42px); }
.brands__hd p { color: var(--muted-l); font-size: 15.5px; }
.car { position: relative; padding: 24px 0 36px; cursor: grab; touch-action: pan-y; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.car.is-drag { cursor: grabbing; }
.car__track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.car__item { flex: none; display: grid; place-items: center; height: 108px; min-width: 230px; padding: 0 40px; border-radius: 16px; background: var(--white); box-shadow: 0 1px 0 var(--line-l), 0 0 0 1px rgba(11, 42, 68, .06); font: 700 clamp(22px, 2vw, 28px)/1 var(--f-display); font-stretch: 115%; letter-spacing: -.02em; color: rgba(11, 42, 68, .42); white-space: nowrap; transition: color .4s, transform .55s var(--spring), box-shadow .45s var(--ease); }
.car__item:hover { color: var(--navy); transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(47, 141, 184, .4), 0 24px 40px -24px rgba(11, 42, 68, .45); }

/* 13. FAQ ============================================================== */
.faq { padding: 0 0 calc(var(--sec) + 160px); }
.faq__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--hdr-h) + 40px); }
.faq__side h2 { font-size: clamp(36px, 4vw, 58px); }
.faq__lead { margin-top: 20px; color: var(--muted-l); max-width: 380px; }
.agent { margin-top: 36px; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--white); box-shadow: 0 1px 0 var(--line-l), 0 30px 60px -44px rgba(11, 42, 68, .5); max-width: 400px; }
.agent > div { flex: 1; min-width: 0; }
.agent b { display: block; font-size: 15px; }
.agent small { font-size: 13px; color: var(--muted-l); }
.agent__av { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--blue-hi); }
.agent__av svg { width: 26px; height: 26px; }
.agent__av i { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--white); }
.agent__av i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--ok); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }

.chat { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.msg { display: flex; flex-direction: column; align-items: flex-end; }
.msg__q { display: flex; align-items: center; gap: 16px; max-width: 90%; padding: 16px 18px 16px 22px; text-align: left; cursor: pointer; border-radius: 22px 22px 6px 22px; background: var(--white); border: 1px solid transparent; box-shadow: 0 1px 0 var(--line-l), 0 0 0 1px rgba(11, 42, 68, .06); color: var(--navy); font: 620 clamp(16px, 1.4vw, 19px)/1.3 var(--f-display); font-stretch: 103%; letter-spacing: -.01em; transition: background .4s var(--ease), color .4s, transform .5s var(--spring), box-shadow .4s; }
.msg__q:hover { transform: translateX(-6px); box-shadow: 0 0 0 1px rgba(47, 141, 184, .45), 0 16px 30px -22px rgba(11, 42, 68, .5); }
.msg__ic { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); transition: background .4s, transform .55s var(--spring); }
.msg__ic::before, .msg__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: currentColor; transition: transform .45s var(--spring); }
.msg__ic::after { transform: rotate(90deg); }
.msg.is-open .msg__q { background: var(--navy); color: #fff; }
.msg.is-open .msg__ic { background: rgba(255, 255, 255, .14); transform: rotate(135deg); }
.msg__a { display: grid; grid-template-rows: 0fr; align-self: stretch; transition: grid-template-rows .55s var(--ease); }
.msg.is-open .msg__a { grid-template-rows: 1fr; }
.msg__wrap { overflow: hidden; min-height: 0; }
.msg__bubble { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: end; padding: 12px 0 4px; max-width: 92%; }
.msg__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--blue-hi); }
.msg__av svg { width: 21px; height: 21px; }
.msg__bubble p, .msg__typing { grid-column: 2; grid-row: 1; }
.msg__bubble p { padding: 16px 20px; border-radius: 22px 22px 22px 6px; background: var(--paper-2); color: #2F4556; font-size: 16px; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.msg.is-answered .msg__bubble p { opacity: 1; transform: none; }
.msg__typing { justify-self: start; display: flex; gap: 5px; padding: 15px 18px; border-radius: 18px 18px 18px 6px; background: var(--paper-2); opacity: 0; transition: opacity .25s; }
.msg.is-typing .msg__typing { opacity: 1; }
.msg__typing i { width: 7px; height: 7px; border-radius: 50%; background: #8396A4; animation: dots 1s ease-in-out infinite; }
.msg__typing i:nth-child(2) { animation-delay: .15s; } .msg__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 30% { transform: translateY(-4px); opacity: .6; } }

/* 14. CONTATO ========================================================== */
/* a seção sobe como uma cúpula sobre o FAQ */
.cta { position: relative; z-index: 2; margin-top: -160px; padding: clamp(96px, 10vw, 140px) 0 0; background: var(--ink); border-radius: 50% 50% 0 0 / 160px 160px 0 0; overflow: hidden; }
.cta__bg { position: absolute; inset: 0; pointer-events: none; }
.cta__mark { left: 50%; top: -120px; width: 1180px; height: 1180px; margin-left: -590px; color: var(--blue); opacity: .055; -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%); }
.cta__ring { position: absolute; left: 50%; top: 172px; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; border: 1px solid rgba(95, 192, 232, .14); animation: breathe 6s ease-in-out infinite; }
.cta__ring--2 { width: 480px; height: 480px; margin: -240px 0 0 -240px; border-color: rgba(95, 192, 232, .07); animation-delay: -3s; }
@keyframes breathe { 50% { transform: scale(1.05); opacity: .6; } }
.cta__in { position: relative; }
.cta__hd { text-align: center; max-width: 760px; margin: 0 auto; }
.cta__emblem { display: inline-grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-d2), 0 0 0 10px rgba(47, 141, 184, .05); color: var(--blue); margin-bottom: 34px; }
.cta__emblem svg { width: 50px; height: 50px; }
.cta__hd h2 { font-size: clamp(40px, 5.2vw, 78px); font-stretch: 110%; letter-spacing: -.04em; }
.cta__hd p { margin: 22px auto 0; max-width: 520px; color: var(--muted-d); font-size: 18px; }
.cta__grid { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cta__info { padding-top: 8px; }
.cta__mail { display: inline-block; margin-top: 22px; font-size: 17px; color: var(--text-d); background: linear-gradient(var(--blue-hi), var(--blue-hi)) left bottom / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--ease), color .3s; }
.cta__mail:hover { background-size: 100% 1px; color: var(--blue-hi); }
.cta__steps { list-style: none; margin: 44px 0 0; padding: 0; position: relative; }
.cta__steps::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 26px; width: 1px; background: linear-gradient(var(--blue-hi), var(--line-d)); }
.cta__steps li { position: relative; padding: 0 0 26px 30px; }
.cta__steps li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--blue-hi); }
.cta__steps b { display: block; font-size: 16.5px; font-weight: 600; }
.cta__steps span { font-size: 15px; color: var(--muted-d); }

.form { position: relative; background: linear-gradient(180deg, rgba(18, 33, 45, .9), rgba(11, 22, 32, .9)); border-radius: 20px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; box-shadow: inset 0 0 0 1px var(--line-d), 0 60px 120px -60px rgba(0, 0, 0, .9); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { position: relative; }
.fld input, .fld select, .fld textarea { width: 100%; height: 60px; padding: 24px 42px 8px 16px; border-radius: 12px; border: 1px solid var(--line-d2); background: rgba(7, 15, 23, .7); color: var(--text-d); font-size: 16px; transition: border-color .3s, box-shadow .3s, background .3s; }
.fld textarea { height: auto; min-height: 112px; padding-top: 30px; resize: vertical; }
.fld select { appearance: none; cursor: pointer; background: rgba(7, 15, 23, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235FC0E8' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 14px no-repeat; }
.fld select option { background: var(--ink-2); }
.fld label { position: absolute; left: 17px; top: 19px; font-size: 15.5px; color: var(--muted-d); pointer-events: none; transform-origin: left top; transition: transform .35s var(--ease), color .3s; }
.fld input:focus + label, .fld input:not(:placeholder-shown) + label, .fld textarea:focus + label, .fld textarea:not(:placeholder-shown) + label, .fld--select label { transform: translateY(-10px) scale(.76); color: var(--blue-hi); }
.fld:hover input, .fld:hover select, .fld:hover textarea { border-color: rgba(170, 200, 220, .4); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue-hi); background: rgba(7, 15, 23, .9); box-shadow: 0 0 0 4px rgba(95, 192, 232, .14); }
.fld__ok { position: absolute; right: 14px; top: 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2305301A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .45s var(--spring); }
.fld.is-valid .fld__ok { opacity: 1; transform: none; }
.fld.is-bad input { border-color: var(--rec); animation: shake .4s var(--ease); }
.fld.is-bad label { color: #FF8A8B; }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.form__chips { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form__chips legend { font-size: 14px; font-weight: 600; color: var(--muted-d); margin-bottom: 10px; padding: 0; }
.form__chips label { display: block; cursor: pointer; }
.form__chips input { position: absolute; opacity: 0; pointer-events: none; }
.form__chips span { display: block; padding: 10px 16px; border-radius: 100px; border: 1px solid var(--line-d2); font-size: 14px; font-weight: 500; color: var(--text-d); transition: background .3s, border-color .3s, color .3s, transform .45s var(--spring); }
.form__chips label:hover span { border-color: var(--blue-hi); transform: translateY(-2px); }
.form__chips input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.form__chips input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.form__err { font-size: 14px; color: #FF8A8B; }
.form__err:empty { display: none; }
.form__send.is-sent { background: var(--ok); color: #05301A; }
.form__note { font-size: 13px; color: var(--muted-d); text-align: center; }

/* 15. FOOTER + WhatsApp ================================================ */
.ftr { position: relative; margin-top: clamp(80px, 9vw, 120px); padding: 40px 0 0; }
.ftr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-d2) 20%, var(--line-d2) 80%, transparent); }
.ftr__in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: 34px; }
.ftr__brand img { height: 30px; width: auto; transition: opacity .3s; }
.ftr__brand:hover img { opacity: .8; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 15px; }
.ftr__nav a { position: relative; color: var(--muted-d); transition: color .3s; }
.ftr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.ftr__nav a:hover { color: #fff; }
.ftr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.ftr__social { display: flex; gap: 8px; }
.ftr__social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-d2); color: var(--muted-d); transition: color .3s, border-color .3s, transform .5s var(--spring), background .3s; }
.ftr__social a:hover { color: #fff; border-color: var(--blue-hi); background: rgba(95, 192, 232, .1); transform: translateY(-3px); }
.ftr__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 30px; font-size: 13.5px; color: rgba(147, 164, 176, .8); }
.ftr__base a { transition: color .3s; }
.ftr__base a:hover { color: #fff; }
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5); }
.wa-float .ic { width: 30px; height: 30px; transition: transform .5s var(--spring); }
.wa-float:hover .ic { transform: rotate(-12deg) scale(1.08); }

/* 16. ANIMAÇÕES DE ENTRADA ============================================ */
/* variações: padrão (sobe), "left" (desliza), "scale" (aproxima), "img" (revela a foto) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="left"] { transform: translateX(-22px); }
.js [data-reveal="scale"] { transform: scale(.965); transform-origin: 50% 80%; transition-duration: 1.1s, 1.3s; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="img"] { opacity: 1; transform: none; background: transparent; }
.js [data-reveal="img"] img { clip-path: inset(0 0 100% 0); transform: scale(1.18); transition: clip-path 1.2s var(--ease), transform 1.6s var(--ease); }
.js [data-reveal="img"].is-in img { clip-path: inset(0); transform: scale(1); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * .04s); }
.is-in .w > span { transform: none; }

/* "reduzir animações" ligado no sistema: tira os movimentos contínuos e o parallax */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .core__ring, .cta__ring, .agent__av i::after { animation: none; }
  .det { animation: detin .5s var(--ease) forwards; animation-delay: var(--d, .4s); }
}

/* 17. RESPONSIVO ======================================================= */
/* telas de toque: sem efeitos de hover que ficam "presos" depois do toque */
@media (hover: none) {
  .seg__list li:hover { padding-left: 0; }
  .seg__list li:hover::before { transform: scale(0); }
  .seg__list li:hover b { color: inherit; }
  .msg__q:hover, .car__item:hover, .thumb:hover, .ftr__social a:hover { transform: none; }
  .msg__q:hover { box-shadow: 0 1px 0 var(--line-l), 0 0 0 1px rgba(11, 42, 68, .06); }
  .car__item:hover { color: rgba(11, 42, 68, .42); box-shadow: 0 1px 0 var(--line-l), 0 0 0 1px rgba(11, 42, 68, .06); }
  .tabs__list button:hover { padding-left: 0; }
  .btn::before { display: none; }
  .btn:active, .msg__q:active, .thumb:active, .viewer__list button:active, .form__chips label:active span { transform: scale(.97); }
}
/* botão flutuante do WhatsApp some no topo e no contato (lá já tem o botão grande) */
.wa-float { transition: transform .5s var(--spring), opacity .35s; }
.wa-float.is-off { opacity: 0; transform: scale(.6); pointer-events: none; }

@media (max-width: 1180px) {
  .nav a { padding: 9px 11px; font-size: 14.5px; }
  .hero__in { grid-template-columns: 1fr; gap: 36px; }
  .dia { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); }
  .dia__core { min-height: 300px; }
  .core { width: 118px; height: 118px; }
  .core__mark { width: 56px; height: 56px; }
  .dia__col li { grid-template-columns: 34px 1fr; padding: 13px 14px; column-gap: 12px; }
  .dia__col li .ic { width: 34px; height: 34px; padding: 8px; }
  .dia__col li b { font-size: 14.5px; line-height: 1.25; }
  .viewer { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; }
  .steps ol { grid-template-columns: 1fr; gap: 30px; padding-left: 34px; }
  .steps li { margin-top: 0 !important; padding-top: 0; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; }
  .steps p { margin-top: 0; }
  .steps__dot { left: -34px; top: 5px; }
}
@media (max-width: 960px) {
  :root { --hdr-h: 64px; }
  .hdr__cta { display: none; }
  .hdr__burger { display: grid; place-items: center; gap: 6px; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-d2); border-radius: 50%; background: none; cursor: pointer; padding: 0; align-content: center; transition: background .3s; }
  .hdr__burger span { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform .45s var(--spring); }
  .hdr__burger[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
  .hdr__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .hdr__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav { position: absolute; top: var(--hdr-h); left: 0; right: 0; height: calc(100vh - var(--hdr-h)); height: calc(100dvh - var(--hdr-h)); flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 20px var(--pad) 40px; background: var(--ink); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); overflow-y: auto; }
  .nav.is-open { clip-path: inset(0); }
  .nav__blob { display: none; }
  .nav a { padding: 18px 0; font: 700 28px/1.1 var(--f-display); font-stretch: 108%; color: var(--text-d); border-bottom: 1px solid var(--line-d); opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .6s var(--ease), color .3s; }
  .nav.is-open a { opacity: 1; transform: none; }
  .nav.is-open a:nth-child(3) { transition-delay: .04s; } .nav.is-open a:nth-child(4) { transition-delay: .08s; } .nav.is-open a:nth-child(5) { transition-delay: .12s; }
  .nav.is-open a:nth-child(6) { transition-delay: .16s; } .nav.is-open a:nth-child(7) { transition-delay: .2s; } .nav.is-open a:nth-child(8) { transition-delay: .24s; }
  .nav__cta-m { display: block; margin-top: 24px; text-align: center; background: var(--blue); border-radius: var(--r); border: 0 !important; font: 600 16px/1 var(--f-body) !important; padding: 18px !important; }
  .hdr.menu-open { background: var(--ink); }
  .hero__shade { background: linear-gradient(0deg, rgba(7, 15, 23, .97) 0%, rgba(7, 15, 23, .86) 45%, rgba(7, 15, 23, .25) 75%, rgba(7, 15, 23, .5) 100%); }
  .hero__in { padding-bottom: 90px; }
  .thumbs { overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad); }
  .thumbs::-webkit-scrollbar { display: none; }
  .thumb { flex: none; width: 118px; }
  .edge { height: 54px; }
  .mf__row, .mf__row--alt { grid-template-columns: 1fr; }
  .mf__row--alt .mf__word { order: -1; text-align: left; }
  .about__grid { grid-template-columns: 1fr; }
  .sol__hd, .brands__hd { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: 1fr; }
  .tabs__list { position: static; flex-direction: row; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); scroll-snap-type: x proximity; scroll-padding: 0 var(--pad); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tabs__list button { scroll-snap-align: start; }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tabs__list button { flex: none; padding: 11px 16px; border: 1px solid var(--line-l); border-radius: 100px; font-size: 15px; white-space: nowrap; }
  .tabs__list button::before, .tabs__list button::after, .tabs__list button .ic { display: none; }
  .tabs__list button:hover { padding-left: 16px; }
  .tabs__list button[aria-selected="true"] { padding-left: 16px; background: var(--navy); color: #fff; border-color: var(--navy); }
  .seg__in, .faq__in, .cta__grid { grid-template-columns: 1fr; }
  /* IA: imagem fica presa no topo enquanto a lista rola embaixo */
  .viewer { grid-template-columns: 1fr; gap: 0; }
  .viewer__side { display: contents; }
  .viewer__side h2 { order: 1; }
  .viewer__lead { order: 2; margin-bottom: 24px; }
  .viewer__stage { order: 3; position: sticky; top: calc(var(--hdr-h) + 10px); z-index: 3; margin-bottom: 18px; }
  .viewer__list { order: 4; }
  .seg__hd, .faq__side { position: static; }
  .cta { margin-top: -80px; border-radius: 50% 50% 0 0 / 80px 80px 0 0; }
  .faq { padding-bottom: calc(var(--sec) + 80px); }
}
/* celular deitado / telas baixas: nada fica preso no topo, para não cobrir a tela */
@media (max-height: 560px) {
  .viewer__stage { position: relative; top: auto; }
  .tabs__list, .seg__hd, .faq__side { position: static; }
  .hero__in { padding-top: calc(var(--hdr-h) + 40px); }
}
/* celular: a câmera vira uma "tela" no topo, com as câmeras logo abaixo e o texto em seguida */
@media (max-width: 760px) {
  .hero { min-height: 0; background: var(--ink); }
  .vms { position: relative; inset: auto; margin-top: var(--hdr-h); aspect-ratio: 16 / 10; overflow: hidden; }
  .vms::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(transparent, var(--ink)); pointer-events: none; }
  .vms__osd { top: 12px; left: 12px; right: 12px; justify-content: space-between; font-size: 10px; gap: 8px; }
  .hero__shade { display: none; }
  .hero__in { min-height: 0; padding-top: 4px; padding-bottom: 96px; gap: 26px; align-items: start; }
  .thumbs { order: -1; gap: 8px; }
  .thumb { width: 104px; }
  .thumb b { margin-top: 6px; font-size: 10px; }
  .thumb small { font-size: 12px; }
  .hero__pre { margin-bottom: 14px; font-size: 13.5px; }
  .hero__title { font-size: clamp(34px, 9.6vw, 44px); }
  .hero__lead { margin-top: 18px; }
  .hero__ctas { margin-top: 26px; }
  /* integração em fluxo vertical: entradas -> núcleo -> saídas */
  .dia { grid-template-columns: 1fr; gap: 0; }
  .dia__col { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dia__col li { grid-template-columns: 1fr; row-gap: 10px; padding: 14px; align-content: start; }
  .dia__col li .ic { grid-row: auto; }
  .dia__col li small { font-size: 12.5px; line-height: 1.35; }
  .dia__col li.is-on { transform: none !important; }
  .dia__core { min-height: 190px; }
  .dia__core::before, .dia__core::after { content: ""; position: absolute; left: 50%; width: 1px; height: 36px; background: repeating-linear-gradient(var(--blue-hi) 0 4px, transparent 4px 9px); opacity: .6; animation: flow 1s linear infinite; }
  .dia__core::before { top: 0; } .dia__core::after { bottom: 0; }
  @keyframes flow { to { background-position: 0 9px; } }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero__lead { font-size: 16.5px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .msg__q { width: 100%; justify-content: space-between; }
  .form__chips { display: grid; grid-template-columns: 1fr 1fr; }
  .form__chips legend { grid-column: 1 / -1; }
  .form__chips span { text-align: center; }
  .agent { flex-wrap: wrap; }
  .agent .btn { flex: 1 1 100%; }
  .ftr__nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 28px; }
  .ftr__base { padding-bottom: 96px; }
  .steps li { grid-template-columns: 1fr; }
  .viewer__osd { font-size: 10px; top: 10px; left: 10px; right: 10px; }
  .viewer__readout { font-size: 11px; left: 10px; bottom: 10px; }
  .det em { font-size: 9px; padding: 3px 4px; }
  .list { columns: 1; }
  .seg__list li { grid-template-columns: 1fr; gap: 6px; }
  .form__row { grid-template-columns: 1fr; }
  .msg__q { max-width: 100%; }
  .msg__bubble { max-width: 100%; }
  .cta__mark { width: 760px; height: 760px; margin-left: -380px; top: -60px; }
  .ftr__in { flex-direction: column; align-items: flex-start; }
  .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .stats { gap: 28px 16px; }
  .car__item { min-width: 180px; height: 92px; padding: 0 28px; }
}