/* CGRabbit v2 · sistema visual claro (aprovado em 22/10/2026).
   Plano: docs/repaginacao-sites/PLANO.md · medidas e animações: .claude/skills/replicar-site-referencia/referencias/*.md
   Base cinza bem clarinho com pontos e grão, cards brancos, texto quase preto, azul #0053F7 só de destaque.
   Escuro só no bloco "Let's talk" e na barra legal. Peso máximo 600. Status por palavra, nunca por cor.
   Páginas com META "chrome: v2" ou "v2-landing" carregam este arquivo no lugar de site.css. */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/geist-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/geist-mono-500.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* base */
  --bg: #F4F5F7;
  --bg-2: #ECEDF0;
  --card: #FFFFFF;
  --line: #E3E6EC;
  --line-2: #D6D9E0;
  /* texto (contraste no --bg: ink 17,9 · ink-2 10,1 · muted 6,1) */
  --ink: #0E0F12;
  --ink-2: #33343B;
  --muted: #5B5B66;
  --faint: #8A8A94;          /* só texto grande ou decorativo */
  /* azul da marca (5,3:1 no --bg, 5,9:1 com texto branco) */
  --blue: #0053F7;
  --blue-h: #0046D1;
  --blue-soft: #EEF3FF;
  --blue-line: #CCDAFD;
  /* bloco escuro */
  --dark: #0E0F12;
  --dark-2: #17181D;
  --dark-line: rgba(244, 245, 247, .1);
  --on-dark: #F4F5F7;
  --on-dark-2: #A3A5AE;
  --blue-on-dark: #5A8DFF;
  /* textura */
  --dot: rgba(14, 15, 18, .07);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle, var(--dot) 1px, transparent 1.4px);
  --haze: radial-gradient(70% 60% at 25% 0%, #FFFFFF, rgba(255, 255, 255, 0) 70%), radial-gradient(55% 60% at 100% 100%, rgba(0, 83, 247, .07), rgba(0, 83, 247, 0) 70%), #ECEDF0;
  /* tipo */
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* movimento (blueprints: Pocket Pay, Fuse, Optivio) */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-2: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.2, .64, 1);
  /* grade */
  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 40px);
  --sec: clamp(88px, 11vw, 144px);
  --r: 24px;
  --r-m: 16px;
  --r-s: 12px;
  --sh-1: 0 1px 2px rgba(14, 15, 18, .04), 0 8px 20px -12px rgba(14, 15, 18, .14);
  --sh-2: 0 1px 2px rgba(14, 15, 18, .05), 0 28px 56px -28px rgba(14, 15, 18, .28);
  interpolate-size: allow-keywords;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* pontos e grão rolam com a página: a mesma grade recomeça no topo, então o topo azul emenda sem costura */
  background-color: var(--bg);
  background-image: var(--grain), var(--dots);
  background-size: 180px 180px, 20px 20px;
  overflow-x: clip;
}
img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(0, 83, 247, .16); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gut));
  margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}

/* ---------- tipo ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; }
.h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.042em; }
.h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.036em; }
.h3 { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.14; letter-spacing: -.026em; }
.h4 { font-size: 20px; line-height: 1.28; letter-spacing: -.016em; }
.two em { font-style: normal; color: var(--muted); }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 640px; text-wrap: pretty; }
.sub { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 600px; text-wrap: pretty; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.link { color: var(--blue); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.trust { font-size: 14px; color: var(--muted); }
.trust b { color: var(--ink); font-weight: 500; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-s);
  background: var(--blue); color: #fff; font: 500 15.5px/1.1 var(--sans); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(14, 15, 18, .14);
  transition: background-color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.btn:hover { background: var(--blue-h); }
.btn:active { transform: translateY(1px); }
.btn .arr { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn--lg { min-height: 56px; padding: 0 26px; font-size: 16.5px; border-radius: 14px; }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 20, 80, .2); }
.btn--white:hover { background: var(--blue-soft); }
.btn--ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- cabeçalho em pílula (SpartanAI + Ballance) ---------- */
.hdr { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)) 0 max(var(--gut), env(safe-area-inset-left, 0px)); pointer-events: none; transition: transform .45s var(--ease); }
html.hdr-hidden .hdr { transform: translateY(-130%); }
.hdr-bar {
  pointer-events: auto; position: relative; max-width: var(--wrap); margin: 0 auto; height: 60px;
  display: flex; align-items: center; gap: 20px; padding: 0 8px 0 20px; border-radius: 999px;
  color: #fff; border: 1px solid transparent; background: rgba(255, 255, 255, 0);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
html.hdr-solid .hdr-bar, html.mm-on .hdr-bar { color: var(--ink); background: rgba(250, 250, 251, .82); border-color: rgba(14, 15, 18, .07); box-shadow: var(--sh-1); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.hdr-logo { display: flex; align-items: center; flex: none; }
.hdr-logo img { height: 26px; width: auto; display: block; }
.hdr-logo .ink { display: none; }
html.hdr-solid .hdr-logo .ink, html.mm-on .hdr-logo .ink { display: block; }
html.hdr-solid .hdr-logo .white, html.mm-on .hdr-logo .white { display: none; }
.hdr-nav { display: flex; align-items: center; gap: 2px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.hdr-nav > li { position: static; }
.hdr-nav a, .hdr-nav button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: none; font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s; }
.hdr-nav a:hover, .hdr-nav button:hover, .hdr-nav button[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
html.hdr-solid .hdr-nav a:hover, html.hdr-solid .hdr-nav button:hover, html.hdr-solid .hdr-nav button[aria-expanded="true"],
html.mm-on .hdr-nav a:hover, html.mm-on .hdr-nav button:hover, html.mm-on .hdr-nav button[aria-expanded="true"] { background: rgba(14, 15, 18, .055); }
.hdr-nav .chev { width: 10px; height: 10px; transition: transform .3s var(--ease); }
.hdr-nav button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-cta { flex: none; }
.hdr-cta.btn { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 999px; }
html:not(.hdr-solid):not(.mm-on) .hdr-cta.btn { background: #fff; color: var(--ink); }
html:not(.hdr-solid):not(.mm-on) .hdr-cta.btn:hover { background: var(--blue-soft); }
.hdr-menu { display: none; flex: none; margin-left: auto; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 500 15px/1 var(--sans); cursor: pointer; }
html.hdr-solid .hdr-menu { background: rgba(14, 15, 18, .06); }
/* página sem topo azul: cabeçalho já começa claro */
html:not(:has(.top-blue)) .hdr-bar { color: var(--ink); }
html:not(:has(.top-blue)) .hdr-nav a:hover, html:not(:has(.top-blue)) .hdr-nav button:hover { background: rgba(14, 15, 18, .055); }
html:not(:has(.top-blue)) .hdr-logo .ink { display: block; }
html:not(:has(.top-blue)) .hdr-logo .white { display: none; }
html:not(:has(.top-blue)) .hdr-cta.btn { background: var(--blue) !important; color: #fff !important; }
html:not(:has(.top-blue)) .hdr-menu { background: rgba(14, 15, 18, .06); }

/* mega menu (Ballance: colunas de links + cards com imagem; abre por item) */
.mm-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(244, 245, 247, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
html.mm-on .mm-scrim { opacity: 1; pointer-events: auto; }
.mm { position: fixed; z-index: 58; left: 0; right: 0; top: calc(80px + env(safe-area-inset-top, 0px)); padding: 0 var(--gut); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .4s var(--ease), visibility 0s .4s; }
.mm.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .4s var(--ease), visibility 0s; }
.mm-box { max-width: var(--wrap); margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-2); padding: 28px; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) minmax(0, 1.3fr); gap: 28px; color: var(--ink); }
.mm-col > p { font: 500 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 0 12px; }
.mm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-link { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; text-decoration: none; transition: background-color .2s; }
.mm-link:hover { background: var(--bg); }
.mm-link b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; letter-spacing: -.01em; }
.mm-link b::after { content: "\2197"; font-size: 13px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .25s, transform .35s var(--ease); }
.mm-link:hover b::after { opacity: 1; transform: none; }
.mm-link span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.mm-cards { display: grid; gap: 12px; grid-template-columns: repeat(var(--cards, 1), minmax(0, 1fr)); }
.mm-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--bg); text-decoration: none; transition: transform .35s var(--ease); }
.mm-card:hover { transform: translateY(-2px); }
.mm-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.mm-card div { padding: 12px 14px 14px; display: grid; gap: 2px; }
.mm-card small { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mm-card b { font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; }
.mm-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mm-work a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; margin: -8px; border-radius: 14px; text-decoration: none; transition: background-color .2s; }
.mm-work a:hover { background: var(--bg); }
.mm-work img { width: 72px; height: 52px; object-fit: cover; object-position: top; border-radius: 9px; background: var(--bg-2); display: block; }
.mm-work b { display: block; font-weight: 500; font-size: 15px; }
.mm-work span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }

/* menu do celular */
.mnav { position: fixed; z-index: 70; inset: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); background: rgba(244, 245, 247, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; overflow-y: auto; }
html.mnav-on .mnav { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
html.mnav-on { overflow: hidden; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-bottom: 8px; }
.mnav-top img { height: 24px; width: auto; }
.mnav-x { height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(14, 15, 18, .06); font: 500 15px/1 var(--sans); cursor: pointer; }
.mnav-list { list-style: none; margin: 0; padding: 0; }
.mnav-list > li { border-bottom: 1px solid var(--line); }
.mnav-list > li > a, .mnav-list summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font: 500 21px/1.2 var(--sans); letter-spacing: -.02em; text-decoration: none; color: var(--ink); cursor: pointer; list-style: none; }
.mnav-list summary::-webkit-details-marker { display: none; }
.mnav-list details ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.mnav-list details a { display: block; padding: 9px 0; font-size: 16px; color: var(--ink-2); text-decoration: none; }
.mnav-list .pm { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.mnav-list details[open] .pm { transform: rotate(45deg); }
.mnav-list > li { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
html.mnav-on .mnav-list > li { opacity: 1; transform: none; }
.mnav .btn { margin-top: auto; }

/* ---------- topo azul (Ballance 5.2): o degradê termina exatamente no --bg ---------- */
.top-blue {
  position: relative; isolation: isolate; color: #fff; overflow-x: clip;
  padding-top: calc(140px + env(safe-area-inset-top, 0px));
  background-image: var(--grain), linear-gradient(180deg, #0047E0 0%, #0053F7 12.5%, #2A6CF8 30%, #6E9AFA 48.7%, #B9CDFB 68%, #E3E9F7 86%, #F4F5F7 100%);
  background-size: 180px 180px, 100% 100%;
}
.top-blue::before, .top-blue::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: 20px 20px; }
.top-blue::before { background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.5px); -webkit-mask-image: linear-gradient(#000 0 34%, transparent 58%); mask-image: linear-gradient(#000 0 34%, transparent 58%); }
.top-blue::after { background-image: var(--dots); -webkit-mask-image: linear-gradient(transparent 46%, #000 86%); mask-image: linear-gradient(transparent 46%, #000 86%); }
.top-blue .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .1); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #E6EEFF; }
.top-blue .pill i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
.top-blue .h1 em { font-style: normal; color: #C9D9FF; }    /* 3,4:1 no #0053F7, título grande */
.top-blue .lede { color: #E6EEFF; }                         /* 5,0:1 no #0053F7 */
/* versão névoa (páginas de leitura) */
.top-mist { position: relative; padding-top: calc(150px + env(safe-area-inset-top, 0px)); background: radial-gradient(120% 70% at 50% -10%, rgba(0, 83, 247, .28), rgba(0, 83, 247, .07) 45%, rgba(0, 83, 247, 0) 70%); }

/* hero centralizado (Fuse) */
.hero-c { display: grid; justify-items: center; text-align: center; gap: 22px; }
.hero-c .h1 { max-width: 1000px; }
.hero-c .lede { max-width: 660px; }
.hero-note { font-size: 14px; color: #DCE6FF; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; margin-right: 8px; }

/* formulário em linha (Fuse) */
.inform { display: flex; gap: 6px; width: min(560px, 100%); padding: 6px; margin-top: 8px; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(0, 25, 90, .55); transition: box-shadow .2s ease; }
.inform:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 18px 40px -18px rgba(0, 25, 90, .55); }
.inform input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font: 400 16px/1 var(--sans); color: var(--ink); outline: none; }
.inform input::placeholder { color: #8A8A94; }
.inform .btn { flex: none; }

/* palco com moldura de navegador */
.stage { position: relative; width: 100%; max-width: 1120px; margin: clamp(48px, 6vw, 72px) auto 0; }
.frame { position: relative; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 8px rgba(255, 255, 255, .55), 0 40px 80px -40px rgba(0, 30, 100, .55); }
.frame-bar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #F7F8FA; border-bottom: 1px solid var(--line); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9DCE3; }
.frame-bar .url { margin: 0 auto; transform: translateX(-24px); font: 400 12px/1 var(--mono); color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-shot { position: relative; aspect-ratio: 16 / 10; background: var(--bg-2); }
.fade > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .9s ease; }
.fade > img.on { opacity: 1; }
.fade-label { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 999px; background: rgba(14, 15, 18, .78); color: #fff; font: 500 12px/1 var(--mono); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fade-dots { display: inline-flex; gap: 4px; }
.fade-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background-color .3s, width .3s var(--ease); }
.fade-dots i.on { background: #fff; width: 14px; border-radius: 3px; }
.stage-fade { position: absolute; left: -10%; right: -10%; bottom: -2px; height: 26%; z-index: 3; pointer-events: none; background: linear-gradient(rgba(244, 245, 247, 0), var(--bg) 78%); }
.fchip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-2); text-align: left; color: var(--ink); }
.fchip .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); flex: none; }
.fchip .ico svg { width: 18px; height: 18px; }
.fchip b { display: block; font-weight: 500; font-size: 14.5px; line-height: 1.25; }
.fchip span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.fchip.a { left: -44px; top: 34%; }
.fchip.b { right: -44px; top: 58%; }
.cap { font-size: 13px; color: var(--muted); text-align: center; margin-top: 18px; position: relative; z-index: 4; }

/* ---------- faixa de prova + ticker (Fuse 3.2) ---------- */
.proof { padding-top: 8px; text-align: center; }
.proof p { font-size: 15.5px; color: var(--muted); }
.proof p b { color: var(--ink); font-weight: 500; }
.ticker { overflow: hidden; margin-top: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14% 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14% 86%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tick var(--tick, 50s) linear infinite; }
.ticker-half { display: flex; flex: none; }
.ticker-half span { padding: 0 24px; font: 500 19px/1 var(--sans); letter-spacing: -.015em; color: #7E808A; white-space: nowrap; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- seções ---------- */
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.c { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head.split { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 16px 48px; }
.sec-head.split .sub { justify-self: end; }
.band { background-color: var(--bg-2); background-image: var(--grain), var(--dots); background-size: 180px 180px, 20px 20px; border-block: 1px solid var(--line); }

/* ---------- bento da dor (Ledgerly + Fuse) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bento > :nth-child(4n+1), .bento > :nth-child(4n+4) { grid-column: span 7; }
.bento > :nth-child(4n+2), .bento > :nth-child(4n+3) { grid-column: span 5; }
.bcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.6vw, 30px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); transition: background-color .3s ease; }
.bcard:hover { background: #FCFCFD; }
.bcard .h4 { font-size: 21px; }
.bcard p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.bcard .now { margin-top: auto; display: flex; gap: 12px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink); }
.bcard .now b { flex: none; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.mini { background: var(--bg); border-radius: 16px; padding: 14px; display: grid; gap: 8px; align-content: start; min-height: 150px; }
.mrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.2; color: var(--ink); min-width: 0; }
.mrow > span:not(.av):not(.tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow.dash { border-style: dashed; background: transparent; color: var(--muted); }
.mrow .av { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-2); font: 500 11px/1 var(--mono); color: var(--ink-2); }
.mrow .tag { flex: none; margin-left: auto; padding: 5px 9px; border-radius: 999px; background: var(--bg-2); font: 500 11.5px/1 var(--mono); color: var(--muted); }
.mrow .tag.ink { background: var(--ink); color: #fff; }
.mrow .tag.blue { background: var(--blue); color: #fff; }
.src { margin-top: 18px; font-size: 13px; color: var(--muted); }
.src a { color: var(--muted); }

/* ---------- o sistema: lista + painel que troca (Pocket Pay 3.4) ---------- */
.sys { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sys-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sys-item { border-bottom: 1px solid var(--line); }
.sys-btn { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 clamp(19px, 1.7vw, 23px)/1.25 var(--sans); letter-spacing: -.018em; color: var(--muted); transition: color .25s ease; }
.sys-btn:hover, .sys-item.on .sys-btn { color: var(--ink); }
.sys-btn .tag { margin-left: auto; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pm { position: relative; flex: none; width: 14px; height: 14px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; border-radius: 1px; transition: transform .35s var(--ease); }
.pm::after { transform: rotate(90deg); }
.on > * > .pm::after, .sys-item.on .pm::after, details[open] > summary .pm::after { transform: rotate(0deg); }
.sys-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.sys-item.on .sys-body { grid-template-rows: 1fr; }
.sys-body > div { overflow: hidden; }
.sys-body .in-body { display: grid; gap: 14px; padding: 0 0 24px; }
.sys-body p { font-size: 16px; color: var(--muted); max-width: 480px; }
.sys-m { display: none; }
.sys-vis { position: sticky; top: 104px; aspect-ratio: 1.12; border-radius: var(--r); overflow: hidden; background: var(--haze); }
.sys-vis::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; }
.sys-pane { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(20px, 3.4vw, 44px); opacity: 0; visibility: hidden; transform: scale(.97); transition: opacity .45s ease, transform .7s var(--ease), visibility 0s .45s; }
.sys-pane.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .7s var(--ease), visibility 0s; }

/* print em card e celular */
.shot { position: relative; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.shot img { display: block; width: 100%; height: auto; }
.sample { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(14, 15, 18, .78); color: #fff; font: 500 11px/1 var(--mono); letter-spacing: .04em; }
.phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 2vw, 24px); width: 100%; }
.phone { position: relative; flex: none; width: min(230px, 40%); aspect-ratio: 600 / 1300; padding: 8px; border-radius: 38px; background: #0E0F12; box-shadow: var(--sh-2), inset 0 0 0 1.5px #2A2B31; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; }
.phone::after { content: ""; position: absolute; top: 15px; left: 50%; width: 30%; height: 18px; transform: translateX(-50%); border-radius: 999px; background: #0E0F12; }
.phone.raw::after { display: none; }
.phones .phone:nth-child(2) { margin-bottom: 28px; }

/* ---------- números (Ledgerly + Fuse) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.stat { display: grid; gap: 12px; align-content: start; padding: 34px 28px 30px; border-left: 1px solid var(--line-2); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font: 400 clamp(46px, 5.4vw, 76px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat > span { font-size: 15.5px; line-height: 1.4; color: var(--muted); max-width: 220px; }
.stats-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.cnt { display: inline-grid; }
.cnt > * { grid-area: 1 / 1; }
.cnt-final { visibility: hidden; }

/* ---------- cartões empilhados presos (Fuse 3.4) ---------- */
.stack { display: grid; gap: 28px; }
.scard { position: sticky; top: calc(96px + var(--k, 0) * 14px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(22px, 3vw, 40px); background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 -12px 40px -24px rgba(14, 15, 18, .18); transform-origin: 50% 0; transform: scale(var(--s, 1)); will-change: transform; }
.scard:nth-child(even) .scard-vis { order: -1; }
.scard .eyebrow { margin-bottom: 14px; }
.scard .h3 { margin-bottom: 14px; }
.scard p { color: var(--muted); font-size: 17px; }
.checks { list-style: none; margin: 22px 0 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.checks li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230053F7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.scard-vis { position: relative; aspect-ratio: 1.18; border-radius: 20px; overflow: hidden; background: var(--haze); display: grid; place-items: center; padding: clamp(18px, 3vw, 36px); }
.scard-vis::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; }
.scard-vis .phone { width: min(200px, 42%); }

/* ---------- comparação em 3 colunas (Optivio 3.4) ---------- */
.cmp { display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cmp-col { padding: 12px 12px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.cmp-col.labels { background: none; border-color: transparent; padding-left: 0; }
.cmp-col.us { background: var(--blue-soft); border-color: transparent; padding: 8px 8px 22px; }
.cmp-badge { height: 112px; margin-bottom: 8px; border-radius: 16px; background: radial-gradient(80% 120% at 50% 120%, rgba(0, 83, 247, .75), rgba(0, 83, 247, 0) 70%), var(--dark); display: grid; place-items: center; }
.cmp-badge img { height: 28px; width: auto; }
.cmp-h { height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px; font: 500 12px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cmp-col.us .cmp-h { color: var(--blue); }
.cmp-col.labels .cmp-h { justify-content: flex-start; padding: 0; }
.cmp-c { height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.25; color: var(--muted); }
.cmp-col.labels .cmp-c { justify-content: flex-start; padding: 0; color: var(--ink); font-size: 15.5px; }
.cmp-col.us .cmp-c { color: var(--ink); font-weight: 500; border-top-color: var(--blue-line); }
.cmp-m { display: none; }
.cmp-foot { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }

/* ---------- calculadora (conversor da Pocket Pay 3.5) ---------- */
.calc { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.calc-panel { position: relative; min-width: 0; padding: clamp(14px, 3vw, 40px); border-radius: 28px; background: var(--haze); overflow: hidden; }
.calc-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; }
.calc-card { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; background: #fff; border-radius: 24px; box-shadow: var(--sh-2); }
.cfield { display: grid; gap: 4px; padding: 12px 16px; background: var(--bg); border-radius: 16px; transition: box-shadow .2s ease; }
.cfield:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cfield label { font-size: 13.5px; color: var(--muted); }
.cfield .row { display: flex; align-items: center; gap: 8px; }
.cfield input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: none; font: 500 26px/1.25 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); outline: none; -moz-appearance: textfield; appearance: textfield; }
.cfield input::-webkit-outer-spin-button, .cfield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cfield .unit { flex: none; padding: 7px 12px; border-radius: 999px; background: #fff; font: 500 13px/1 var(--mono); color: var(--muted); }
.cfield small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cres > div { padding: 16px 18px; border-radius: 16px; background: var(--dark); color: var(--on-dark); display: grid; gap: 6px; }
.cres > div:last-child { background: var(--blue); }
.cres span { font-size: 13px; color: var(--on-dark-2); }
.cres > div:last-child span { color: #DCE6FF; }
.cres b { font: 400 clamp(30px, 3.4vw, 42px)/1 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.csave { padding: 12px 16px; border-radius: 12px; background: var(--blue-soft); font-size: 14.5px; color: var(--ink); }
.csave b { font-weight: 500; }

/* ---------- ao vivo + por baixo (Ledgerly) ---------- */
.live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; }
.live--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ltile { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s ease; }
.ltile:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.ltile-img { aspect-ratio: 16 / 10; background: var(--bg-2); overflow: hidden; }
.ltile-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.ltile:hover .ltile-img img { transform: scale(1.04); }
.ltile-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.ltile-body b { display: block; font-weight: 500; font-size: 16px; }
.ltile-body span { display: block; font: 400 12.5px/1.3 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.ltile .open { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 13px/1 var(--sans); }
.grow { display: grid; gap: 12px; }
.grow-row { display: flex; gap: 12px; }
.gcard { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; transition: flex-grow .6s var(--ease), filter .4s ease, opacity .4s ease, background-color .3s; }
.gcard .h4 { font-size: 19px; padding-right: 44px; }
.gcard > p { font-size: 15.5px; color: var(--muted); }
.gcard .vis { margin-top: auto; display: grid; gap: 6px; }
.gbtn { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.gbtn:hover { background: var(--bg-2); }
.gbtn .pm { width: 12px; height: 12px; }
.gmore { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.gmore > div { overflow: hidden; }
.gmore p { font-size: 15px; color: var(--ink-2); padding-top: 4px; }
.gcard.open { flex-grow: 2.2; background: #FCFCFD; }
.gcard.open .gmore { grid-template-rows: 1fr; }
.gcard.open .gbtn .pm::after { transform: rotate(0deg); }
.grow-row.has-open .gcard:not(.open) { filter: blur(2px); opacity: .55; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.chip small { font: 500 11px/1 var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.integ { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.integ > div { padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.integ p { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.integ .chip { background: var(--bg); border-color: transparent; }

/* ---------- passos Map · Build · Grow (Fuse 3.8) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); min-height: 420px; }
.step-k { align-self: flex-start; padding: 7px 12px; border-radius: 9px; background: var(--bg); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.step-vis { flex: 1; display: grid; place-items: center; padding: 18px; border-radius: 16px; background: var(--haze); overflow: hidden; }
.step-vis .mini { width: 100%; background: rgba(255, 255, 255, .6); }
.step .h4 { font-size: 19px; }
.step p { font-size: 15.5px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq-list details { border-top: 1px solid var(--line-2); }
.faq-list details:last-child { border-bottom: 1px solid var(--line-2); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 500 18.5px/1.35 var(--sans); letter-spacing: -.012em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .pm { width: 14px; height: 14px; }
.faq-list details > p { padding: 0 48px 24px 0; color: var(--muted); font-size: 16.5px; line-height: 1.6; }
.faq-list details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
.faq-list details[open]::details-content { height: auto; }

/* ---------- rodapé em 3 tempos (madebykota + Fabrica + SpartanAI) ---------- */
.invite { position: relative; padding-top: var(--sec); text-align: center; }
.invite-c { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; margin-top: clamp(4px, 1.4vw, 20px); }
.invite--plain { padding-bottom: clamp(8px, 2vw, 24px); }
.invite--plain .invite-c { margin-top: 0; }
.invite-c .h2 { font-size: clamp(44px, 7vw, 104px); letter-spacing: -.05em; line-height: .98; }
.invite-c .trust { margin-top: -6px; }
.invite-mist { position: absolute; left: 0; right: 0; bottom: 0; height: 100vh; pointer-events: none; z-index: 1; background: linear-gradient(rgba(244, 245, 247, 0), var(--bg) 90%); transform-origin: 50% 100%; transform: scaleY(var(--p, 0)); }
.blurlayer { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: rgba(255, 255, 255, .01); -webkit-backdrop-filter: blur(var(--blur, 0px)); backdrop-filter: blur(var(--blur, 0px)); opacity: 0; }
html.blur-on .blurlayer { opacity: 1; }
.endwrap { position: relative; z-index: 5; }

.talk { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(56px, 8vw, 120px); padding: clamp(14px, 2.4vw, 32px); border-radius: 32px; color: var(--on-dark); background-color: var(--dark); background-image: var(--grain), radial-gradient(60% 80% at 100% 0%, rgba(0, 83, 247, .35), rgba(0, 83, 247, 0) 70%); background-size: 180px 180px, 100% 100%; }
.talk-form { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; background: #fff; color: var(--ink); }
.talk-form .h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 4px; }
.talk-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(6px, 1vw, 12px); }
.talk-side .big { font-size: clamp(64px, 11vw, 168px); line-height: .9; letter-spacing: -.06em; font-weight: 500; }
.talk-side .lede { color: var(--on-dark-2); }
.person { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--dark-line); width: fit-content; max-width: 100%; }
.person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: none; }
.person b { display: block; font-weight: 500; font-size: 15.5px; }
.person a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); font-size: 14.5px; text-decoration: none; overflow-wrap: anywhere; }
.person a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-on-dark); flex: none; transition: transform .3s var(--ease); }
.person a:hover::before { transform: scale(1.4); }
.person a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* campos de formulário (talk e popup) */
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; color: var(--muted); }
.field label span { color: var(--faint); }
.field input, .field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: 400 16px/1.4 var(--sans); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(0, 83, 247, .12); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-err { font-size: 14px; color: var(--ink); background: var(--bg-2); border-radius: 10px; padding: 10px 12px; }
.form-ok { display: grid; gap: 12px; align-content: start; }
.form-ok p:first-child { font-size: 20px; font-weight: 500; letter-spacing: -.015em; }

.foot { position: relative; padding-top: clamp(56px, 7vw, 96px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .65fr)); gap: 32px; }
.foot-st { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; max-width: 440px; }
.foot-col p { font: 500 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; text-decoration: none; color: var(--ink); }
.foot-col a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); transform: scale(0); margin-left: -14px; transition: transform .3s var(--ease), margin .3s var(--ease); }
.foot-col a:hover::before { transform: scale(1); margin-left: 0; }
.foot-word { margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(20px, 3vw, 36px); border-top: 1px solid var(--line-2); }
.foot-word img { display: block; width: 100%; height: auto; }
.legal { margin-top: clamp(24px, 3vw, 40px); background: var(--dark); color: var(--on-dark-2); }
.legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 13px; }
.legal a { color: var(--on-dark); text-decoration: none; }
.legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* popup do free assessment (dialog nativo) */
dialog.lead { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: var(--sh-2); overflow: auto; }
dialog.lead::backdrop { background: rgba(14, 15, 18, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.lead[open] { animation: pop .45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
html:has(dialog.lead[open]) { overflow: hidden; }
.lead-in { display: grid; gap: 14px; padding: clamp(22px, 4vw, 32px); }
.lead-in .h3 { font-size: clamp(24px, 3vw, 30px); padding-right: 40px; }
.lead-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--bg); cursor: pointer; display: grid; place-items: center; }
.lead-x .pm { transform: rotate(45deg); }
.lead-x .pm::after { transform: rotate(90deg) !important; }

/* ---------- entrada ao rolar (uma só para o site, Pocket Pay 7) ---------- */
html.js [data-r] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
html.js [data-r="lg"] { transform: translateY(60px); }
html.js [data-r="fade"] { transform: none; }
html.js [data-r="pop"] { transform: translateX(-28px) scale(.7); transition-timing-function: var(--spring); }
html.js [data-r="pop-r"] { transform: translateX(28px) scale(.7); transition-timing-function: var(--spring); }
html.js [data-r].in { opacity: 1; transform: none; }
html.js .words .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--wi, 0) * 60ms); }
html.js .words.in .w { opacity: 1; transform: none; filter: none; }
/* comparação: colunas sobem em cascata e as linhas se escrevem */
html.js .cmp .cmp-col { opacity: 0; transform: translateY(60px); transition: opacity .6s ease, transform .7s var(--spring); }
html.js .cmp .cmp-col:nth-child(2) { transition-delay: .1s; }
html.js .cmp .cmp-col:nth-child(3) { transition-delay: .2s; }
html.js .cmp .cmp-col:nth-child(4) { transition-delay: .3s; }
html.js .cmp .cmp-c { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(.3s + var(--i, 0) * 70ms); }
html.js .cmp.in .cmp-col, html.js .cmp.in .cmp-c { opacity: 1; transform: none; }
/* linhas das mini telas */
html.js .mini [data-r] { transition-duration: .6s; }

/* ---------- celular e tablet ---------- */
@media (max-width: 1100px) {
  .fchip.a { left: -12px; }
  .fchip.b { right: -12px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, .7fr)); }
}
@media (max-width: 960px) {
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-menu { display: inline-flex; align-items: center; }
  .mm, .mm-scrim { display: none; }
  .sys { grid-template-columns: minmax(0, 1fr); }
  .sys-vis { display: none; }
  .sys-m { display: block; margin-top: 4px; border-radius: 18px; overflow: hidden; background: var(--haze); padding: 18px; }
  .sys-m .phone { width: min(190px, 46%); }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .talk { grid-template-columns: minmax(0, 1fr); }
  .talk-side { order: -1; }
  .integ { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 810px) {
  .fchip { display: none; }
  .bento > * { grid-column: span 12 !important; }
  .sec-head.split { grid-template-columns: minmax(0, 1fr); }
  .sec-head.split .sub { justify-self: start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 26px 18px 24px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
  .scard { position: relative; top: auto; transform: none !important; grid-template-columns: minmax(0, 1fr); }
  .scard:nth-child(even) .scard-vis { order: 0; }
  .cmp { display: none; }
  .cmp-m { display: grid; gap: 10px; }
  .cmp-m .row { padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 10px; }
  .cmp-m .row > p { font-weight: 500; font-size: 16px; }
  .cmp-m .cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cmp-m .cells div { padding: 10px 8px; border-radius: 12px; background: var(--bg); font-size: 13px; line-height: 1.3; color: var(--muted); display: grid; gap: 4px; align-content: start; }
  .cmp-m .cells small { font: 500 9.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
  .cmp-m .cells div.us { background: var(--blue-soft); color: var(--ink); font-weight: 500; }
  .cmp-m .cells div.us small { color: var(--blue); }
  .live { grid-template-columns: minmax(0, 1fr); }
  .grow-row { flex-direction: column; }
  .grow-row.has-open .gcard:not(.open) { filter: none; opacity: 1; }
  .gcard { min-height: 0; flex: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { min-height: 0; }
  .step-vis { min-height: 180px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .blurlayer { display: none; }
}
@media (max-width: 560px) {
  .inform { flex-direction: column; padding: 8px; }
  .inform input { height: 48px; }
  .inform .btn { width: 100%; }
  .cres { grid-template-columns: minmax(0, 1fr); }
  .integ { grid-template-columns: minmax(0, 1fr); }
  .frame-bar .url { display: none; }
  .phones .phone:nth-child(2) { margin-bottom: 16px; }
}

/* ---------- movimento reduzido: tudo parado no estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-r], html.js .words .w, html.js .cmp .cmp-col, html.js .cmp .cmp-c { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .ticker-track { animation: none; }
  .fade > img { transition: none; }
  .scard { transform: none !important; }
  .invite-mist, .blurlayer { display: none; }
  .gcard, .sys-body, .gmore, .sys-pane { transition: none; }
}

/* ======================================================================================================
   v2.1 · 22/10/2026 · ajustes pedidos pelo Rodrigo depois da prévia:
   topo com foto de catering + celular + mais balões · logos em preto e branco · seção do problema visual ·
   "ao vivo" com aparelhos e logos · notebook que abre na rolagem (estilo Apple), com print parado na tela
   ====================================================================================================== */

/* topo: colagem foto + moldura + celular + balões */
.stage .frame { z-index: 2; }
/* 23/10: a faixa .stage-fade por cima da moldura cobria os pontos do fundo e terminava em borda reta nas laterais
   ("barra branca quebrada"). Agora a própria moldura esmaece com máscara; o anel claro virou borda para não ser cortado. */
.stage .frame { box-shadow: none; border: 8px solid rgba(255, 255, 255, .55); background-clip: padding-box; border-radius: 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .3) 76%, transparent 90%); mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .3) 76%, transparent 90%); }
.stage-fade { display: none; }
.frame-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage-photo { position: absolute; z-index: 1; left: -11%; top: -64px; width: 27%; aspect-ratio: 4 / 5; margin: 0; border-radius: 22px; overflow: hidden; rotate: -4deg; box-shadow: 0 0 0 6px rgba(255, 255, 255, .5), 0 40px 70px -34px rgba(0, 30, 100, .6); }
.stage-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage-phone { position: absolute; z-index: 3; right: -9%; top: 16%; width: 19%; rotate: 5deg; }
.stage-phone .phone { width: 100%; }
.fchip { white-space: nowrap; }
.fchip.a { left: -13%; top: 58%; }
.fchip.b { right: -12%; top: 74%; }
.fchip.c { left: 9%; top: -42px; }
.fchip.d { right: 4%; top: -40px; }
.fchip.e { left: 30%; top: 66%; }
.fchip .ico.ink { background: var(--ink); color: #fff; }
.fchip .ico.blue { background: var(--blue); color: #fff; }
@keyframes bob { 50% { translate: 0 -7px; } }
html.js .fchip.in { animation: bob 6s ease-in-out infinite; animation-delay: var(--bob, 0s); }

/* faixa de logos (monocromáticos, uso nominativo) */
.ticker-half .lg { display: flex; align-items: center; height: 44px; padding: 0 30px; }
.ticker-half .lg img { display: block; width: auto; height: 22px; opacity: .58; }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.lt { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 10px; height: 116px; padding: 18px 14px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; transition: transform .35s var(--ease), box-shadow .35s ease; }
.lt:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.lt img { display: block; width: auto; height: 26px; max-width: 82%; opacity: .86; }
.lt .wm { display: flex; align-items: center; gap: 7px; font: 600 19px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); opacity: .86; }
.lt .wm img { height: 22px; opacity: 1; }
.lt small { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* a dor em desenhos: recibo, três telas, caixa e conversa */
.vis { position: relative; height: 214px; border-radius: 16px; background: var(--bg); overflow: hidden; display: grid; place-items: center; padding: 16px; }
.rc { width: min(300px, 94%); padding: 14px 16px 20px; background: #fff; border-radius: 10px 10px 0 0; box-shadow: var(--sh-1); font-size: 13.5px; font-variant-numeric: tabular-nums; -webkit-mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) 50% / 14px 100%; }
.rc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rc-h b { font-weight: 500; font-size: 14px; }
.rc-h span { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 2px 0 8px; }
.rc-bar i { display: block; height: 100%; }
.rc-bar i:first-child { width: 80%; background: var(--blue-line); }
.rc-bar i:last-child { width: 20%; background: var(--ink); }
.rc-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line-2); }
.rc-row.hit span:last-child { padding: 1px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-weight: 500; }
.rc-row.tot { font-weight: 500; font-size: 14.5px; }
.vis-note { position: absolute; right: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: var(--blue); color: #fff; font: 500 11.5px/1 var(--mono); box-shadow: 0 8px 18px -8px rgba(0, 83, 247, .6); }
.tabs3 { position: relative; width: 100%; height: 100%; }
.tab { position: absolute; width: 50%; padding: 10px 11px; display: grid; align-content: start; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-1); }
.tab::before { content: ""; display: block; height: 6px; width: 30px; border-radius: 3px; background: var(--bg-2); margin-bottom: 2px; }
.tab p { font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tab .sk { height: 7px; border-radius: 4px; background: var(--bg-2); }
.tab .sk.s { width: 60%; }
.tab .ping { justify-self: start; margin-top: 2px; padding: 5px 9px; border-radius: 999px; background: var(--blue); color: #fff; font: 500 11px/1 var(--mono); animation: ping 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.tab.t1 { left: 2%; top: 16%; rotate: -6deg; }
.tab.t2 { left: 25%; top: 4%; z-index: 2; }
.tab.t3 { right: 2%; top: 20%; z-index: 3; rotate: 6deg; }
.tab.t3 .ping { background: var(--ink); }
@keyframes ping { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 83, 247, .35); } 50% { box-shadow: 0 0 0 7px rgba(0, 83, 247, 0); } }
.pos { width: min(310px, 94%); padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-1); font-size: 13px; font-variant-numeric: tabular-nums; }
.pos-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.pos-top b { font-weight: 500; font-size: 13.5px; }
.pos-top span { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pos-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.pos-row.miss { margin: 4px -6px; padding: 7px 6px; border: 1.5px dashed var(--muted); border-radius: 8px; color: var(--muted); }
.pos-row.miss span:last-child { padding: 3px 7px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 10.5px/1.2 var(--mono); }
.pos-tot { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line-2); font-weight: 500; }
.chat { width: min(300px, 96%); display: grid; gap: 6px; }
.chat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 12.5px; }
.chat-top .av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 500 11px/1 var(--mono); }
.chat-top b { font-weight: 500; display: block; line-height: 1.2; }
.chat-top span { color: var(--muted); display: block; line-height: 1.2; }
.chat-top .tm { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--muted); }
.bub { max-width: 88%; padding: 8px 12px; border-radius: 16px; font-size: 13px; line-height: 1.35; }
.bub.in { justify-self: start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub.out { justify-self: end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.typing { justify-self: end; display: flex; gap: 4px; padding: 10px 12px; border-radius: 16px; background: var(--blue-soft); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: blink 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ao vivo: cartão grande com aparelhos */
.showcase { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(18px, 3vw, 36px); margin-bottom: 48px; background: var(--card); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.showcase .in-text { display: grid; gap: 16px; align-content: start; padding: clamp(4px, 1vw, 12px); }
.showcase .h3 { font-size: clamp(24px, 2.6vw, 34px); }
.live-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.showcase-vis { position: relative; aspect-ratio: 1.42; border-radius: 20px; overflow: hidden; background: var(--haze); container-type: inline-size; }
.showcase-vis::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; }
/* moldura e celular alinhados pela base: o print enche a moldura e o celular encosta na quina de baixo */
.showcase-vis .frame { position: absolute; left: 5%; top: 9%; width: 76%; border-radius: 12px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), var(--sh-2); }
.showcase-vis .frame-bar { height: 7cqw; min-height: 22px; max-height: 34px; }
.showcase-vis .frame-shot { aspect-ratio: 1.6; }
.showcase-vis .phone { position: absolute; z-index: 2; right: 5%; bottom: 7%; width: 23%; padding: 1.3cqw; border-radius: 6cqw; }
.showcase-vis .phone img { border-radius: 4.8cqw; }
.showcase-vis .phone::after { top: 2.6cqw; height: 2.9cqw; }
.live-dot { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(0, 83, 247, .4); animation: ping 2s ease-in-out infinite; }

@media (max-width: 1360px) {
  .stage-photo { left: -6%; width: 24%; }
  .stage-phone { right: -5%; width: 17%; }
  .fchip.a { left: -8%; }
  .fchip.b { right: -7%; }
}
@media (max-width: 1100px) {
  .fchip.c, .fchip.e { display: none; }
  .stage-photo { left: -3%; top: -48px; width: 26%; }
  .stage-phone { right: -2%; }
  .fchip.a { left: -2%; }
  .fchip.b { right: -2%; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 810px) {
  .stage { margin-top: 64px; }
  .stage-photo { left: -2%; top: -46px; width: 36%; border-radius: 16px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 24px 40px -22px rgba(0, 30, 100, .6); }
  .stage-phone { right: -1%; top: auto; bottom: -14%; width: 27%; }
  .stage + .cap { margin-top: calc(14px + 15vw); } /* o celular passa 14% da altura do palco para baixo; a legenda desce junto */
  .stage-phone .phone { padding: 5px; border-radius: 24px; }
  .stage-phone .phone img { border-radius: 19px; }
  .stage-phone .phone::after { top: 9px; height: 11px; }
  .fchip { display: flex; padding: 8px 10px 8px 8px; gap: 8px; border-radius: 12px; }
  .fchip .ico { width: 26px; height: 26px; border-radius: 8px; }
  .fchip .ico svg { width: 14px; height: 14px; }
  .fchip b { font-size: 12px; }
  .fchip span { font-size: 10.5px; }
  .fchip.a, .fchip.d { display: none; }
  .fchip.c { display: flex; left: auto; right: 0; top: -40px; }
  .fchip.b { right: auto; left: 2%; top: auto; bottom: 18%; }
  .stage-fade { height: 18%; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt { height: 100px; }
  .vis { height: 200px; }
}
@media (max-width: 600px) {
  /* três telas viram três avisos em cascata, nome à esquerda e o alerta à direita */
  .tab { width: 78%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
  .tab::before, .tab .sk { display: none; }
  .tab .ping { margin-top: 0; }
  .tab.t1 { left: 3%; top: 7%; rotate: -2deg; }
  .tab.t2 { left: 11%; top: 37%; }
  .tab.t3 { left: auto; right: 3%; top: 67%; rotate: 2deg; }
  .showcase-vis .phone { width: 27%; right: 4%; bottom: 6%; }
  .showcase-vis .frame { width: 78%; left: 4%; top: 8%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .6), var(--sh-2); }
  .showcase-vis .frame-bar .url { display: none; }
  .vis-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .fchip.in { animation: none; }
  .tab .ping, .typing i, .live-dot::before { animation: none; }
}

/* ======================================================================================================
   v2.2 · 22/10/2026 · cenas animadas (pedido do Rodrigo: "mais visual, animado, nada muito estático")
   "How it works" (Map, Build, Grow) e os cards de "por baixo" do See it live. Cada cena tem como estado
   parado a cena completa; as keyframes só fazem o loop. [data-anim] só toca na tela (v2.js, classe .play).
   ====================================================================================================== */
html.js [data-anim]:not(.play), html.js [data-anim]:not(.play) *, html.js [data-anim]:not(.play) *::before, html.js [data-anim]:not(.play) *::after { animation-play-state: paused !important; }
.ani { position: relative; overflow: hidden; border-radius: 14px; background: var(--bg); }
.ani *, .ani *::before, .ani *::after { animation-fill-mode: backwards !important; }
.ani .k { font: 500 9.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ani .pill { display: inline-block; padding: 4px 8px; border-radius: 999px; font: 500 10px/1 var(--mono); white-space: nowrap; }
.ani .pill.ink { background: var(--ink); color: #fff; }
.ani .pill.blue { background: var(--blue); color: #fff; }
.ani .box { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* cards de detalhe: a cena vai em cima */
.gcard .ani { height: 150px; margin: -6px -6px 6px; }
.gcard .ad-photo { position: absolute; z-index: 2; left: 50%; top: 16px; translate: -50% 0; margin: 0; } /* no card de 150px a pílula "Photo saved" sai cortada embaixo: vira aviso no topo, onde o push já saiu */
.gcard .h4 { padding-right: 0; }
.gcard .gbtn { top: auto; bottom: 16px; }
.gcard > p { padding-right: 40px; }

/* 1 · POS: o cartão entra no caixa, "Paid", o pedido repetido é barrado */
.ap-card { position: absolute; left: 10%; top: 36%; width: 64px; height: 42px; border-radius: 8px; background: var(--ink); box-shadow: var(--sh-1); animation: apCard 5s var(--ease) infinite; }
.ap-card::before { content: ""; position: absolute; left: 9px; top: 11px; width: 14px; height: 10px; border-radius: 2px; background: #C9CCD3; }
.ap-card::after { content: ""; position: absolute; left: 9px; bottom: 8px; width: 34px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
@keyframes apCard { 0% { transform: translateX(-50px); opacity: 0; } 12% { transform: none; opacity: 1; } 26% { transform: translateX(84px) rotate(-6deg); opacity: 1; } 32%, 100% { transform: translateX(104px) rotate(-6deg); opacity: 0; } }
.ap-term { position: absolute; right: 10%; top: 14%; width: 44%; max-width: 150px; height: 64%; padding: 8px; display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.ap-scr { height: 46px; border-radius: 7px; background: var(--bg); display: grid; place-items: center; align-content: center; gap: 4px; }
.ap-scr b { font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ap-scr .pill { animation: apPaid 5s var(--spring) infinite; }
@keyframes apPaid { 0%, 28% { transform: scale(0); opacity: 0; } 36%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.ap-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ap-keys i { height: 9px; border-radius: 3px; background: var(--bg-2); }
.ap-dup { position: absolute; left: 50%; bottom: 8px; animation: apDup 5s var(--ease) infinite; translate: -50% 0; }
@keyframes apDup { 0%, 54% { opacity: 0; transform: translateY(8px); } 60%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 2 · ezCater nos dois sentidos: pedido entra, status volta */
.ae-node { position: absolute; top: 50%; translate: 0 -50%; width: 31%; height: 62%; display: grid; place-items: center; align-content: center; gap: 7px; padding: 8px; }
.ae-node.l { left: 5%; }
.ae-node.r { right: 5%; }
.ae-node img { width: 80%; height: auto; opacity: .86; }
.ae-dash { display: grid; gap: 3px; width: 72%; }
.ae-dash i { height: 6px; border-radius: 3px; background: var(--bg-2); }
.ae-dash i:first-child { background: var(--blue-line); }
.ae-lane { position: absolute; left: 37%; right: 37%; height: 0; border-top: 1.5px dashed var(--line-2); }
.ae-lane.t { top: 38%; }
.ae-lane.b { top: 66%; }
.ae-lane .k { position: absolute; left: 50%; translate: -50% -170%; white-space: nowrap; }
.ae-lane.b .k { translate: -50% 70%; }
.ae-lane i { position: absolute; top: -5.5px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0, 83, 247, .15); animation: aeR 2.6s ease-in-out infinite; }
.ae-lane.b i { background: var(--ink); box-shadow: 0 0 0 4px rgba(14, 15, 18, .12); animation-name: aeL; animation-delay: 1.3s; }
@keyframes aeR { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes aeL { 0% { left: calc(100% - 10px); opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: 0; opacity: 0; } }

/* 3 · cardápio lido do POS: o item acende no caixa e aparece no site */
.a-menu { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; }
.am-col { width: 36%; padding: 10px; display: grid; gap: 6px; }
.am-col i { height: 14px; border-radius: 5px; background: var(--bg-2); }
.am-col.l i { animation: amL 4.5s ease infinite; }
.am-col.r i { transform-origin: 0 50%; background: var(--blue-soft); border: 1px solid var(--blue-line); animation: amR 4.5s var(--ease) infinite; }
.am-col i:nth-of-type(2) { animation-delay: .6s; }
.am-col i:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes amL { 0%, 6% { background: var(--bg-2); } 12%, 28% { background: var(--blue-line); } 38%, 100% { background: var(--bg-2); } }
@keyframes amR { 0%, 12% { transform: scaleX(0); opacity: 0; } 24%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.am-sync { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.am-sync svg { width: 16px; height: 16px; animation: spin 3s linear infinite; }

/* 4 · uma loja, um caixa: a moeda cai em cada loja e a etiqueta de imposto acende */
.a-stores { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 14px 12px 16px; }
.as-st { position: relative; width: 30%; padding: 24px 6px 10px; display: grid; justify-items: center; gap: 6px; }
.as-st svg { width: 26px; height: 26px; color: var(--ink); }
.as-st b { font: 500 11.5px/1 var(--sans); }
.as-st .pill { background: var(--bg-2); color: var(--muted); animation: asTag 4.5s ease infinite; }
.as-coin { position: absolute; top: -2px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--blue); color: #fff; font: 500 11px/20px var(--mono); text-align: center; animation: asCoin 4.5s cubic-bezier(.5, 0, .75, 0) infinite; }
.as-st:nth-child(2) .as-coin, .as-st:nth-child(2) .pill { animation-delay: .7s; }
.as-st:nth-child(3) .as-coin, .as-st:nth-child(3) .pill { animation-delay: 1.4s; }
@keyframes asCoin { 0% { transform: translateY(-46px); opacity: 0; } 8% { opacity: 1; } 24% { transform: translateY(12px); opacity: 1; } 30%, 100% { transform: translateY(16px); opacity: 0; } }
@keyframes asTag { 0%, 24% { background: var(--bg-2); color: var(--muted); } 30%, 72% { background: var(--ink); color: #fff; } 82%, 100% { background: var(--bg-2); color: var(--muted); } }

/* 5 · app do motorista: aviso chega, itens marcados, foto salva */
.a-drv { display: grid; justify-items: center; }
.ad-ph { position: relative; width: 136px; height: 168px; margin-top: 18px; padding: 34px 9px 10px; display: grid; align-content: start; gap: 5px; background: #fff; border: 6px solid var(--ink); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: var(--sh-1); }
.ad-ph::before { content: ""; position: absolute; top: 6px; left: 50%; width: 38px; height: 10px; margin-left: -19px; border-radius: 999px; background: var(--ink); }
.ad-ph::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: adFlash 6s linear infinite; }
@keyframes adFlash { 0%, 61% { opacity: 0; } 62.5% { opacity: .9; } 67%, 100% { opacity: 0; } }
.ad-push { position: absolute; z-index: 2; left: 6px; right: 6px; top: 16px; display: flex; gap: 6px; align-items: center; padding: 6px 7px; border-radius: 10px; background: rgba(244, 245, 247, .97); border: 1px solid var(--line); box-shadow: var(--sh-1); animation: adPush 6s var(--ease) infinite; }
.ad-push i { flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--blue); }
.ad-push b { display: block; font: 500 9.5px/1.15 var(--sans); }
.ad-push span { display: block; font-size: 8.5px; line-height: 1.2; color: var(--muted); }
@keyframes adPush { 0% { transform: translateY(-64px); opacity: 0; } 8%, 26% { transform: none; opacity: 1; } 32%, 100% { transform: translateY(-64px); opacity: 0; } }
.ad-row { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 7px; background: var(--bg); font-size: 9.5px; line-height: 1.1; }
.ad-row i { flex: none; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; animation: adTick 6s ease infinite; }
.ad-row:nth-of-type(3) i { animation-delay: .5s; }
.ad-row:nth-of-type(4) i { animation-delay: 1s; }
@keyframes adTick { 0%, 34% { background-color: #fff; background-size: 0; border-color: var(--line-2); } 40%, 92% { background-color: var(--blue); background-size: 9px; border-color: var(--blue); } 100% { background-color: #fff; background-size: 0; border-color: var(--line-2); } }
.ad-photo { justify-self: center; margin-top: 2px; animation: adPhoto 6s ease infinite; }
@keyframes adPhoto { 0%, 60% { opacity: 0; transform: scale(.8); } 66%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 6 · vigiado e com backup: batimento, alerta que leva ao pedido, backup enchendo */
.aw-live { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; }
.aw-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: ping 2s ease-in-out infinite; }
.aw-ecg { position: absolute; left: 0; right: 0; top: 40px; width: 100%; height: 52px; }
.aw-ecg path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.aw-ecg .base { stroke: var(--line-2); }
.aw-ecg .beat { stroke: var(--blue); stroke-dasharray: 22 78; animation: ecg 2.4s linear infinite; }
@keyframes ecg { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.aw-alert { position: absolute; right: 12px; top: 10px; animation: awAlert 6s var(--ease) infinite; }
@keyframes awAlert { 0%, 50% { opacity: 0; transform: translateX(16px); } 56%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(16px); } }
.aw-bk { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 5px; }
.aw-bk i { display: block; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.aw-bk b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; animation: awBk 6s ease-in-out infinite; }
@keyframes awBk { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }

/* "How it works": ícone que se mexe + cena */
.step-k { display: inline-flex; align-items: center; gap: 8px; }
.step-k svg { width: 18px; height: 18px; color: var(--blue); }
.ico-map { animation: wob 3s ease-in-out infinite; transform-origin: 40% 40%; }
@keyframes wob { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg) translateX(1px); } }
.ico-build .top { animation: drop 2.6s var(--spring) infinite; }
@keyframes drop { 0%, 20% { transform: translateY(-5px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
.ico-grow .arw { animation: rise 2.4s ease-in-out infinite; }
@keyframes rise { 0%, 100% { transform: none; } 50% { transform: translate(1.5px, -1.5px); } }
.step-vis.ani { flex: 1; min-height: 210px; padding: 0; display: grid; place-items: center; background: var(--haze); }
.step-vis.ani::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; }

/* Map: a lupa passa pelos canais e marca o problema de cada um */
.sm-card { position: relative; width: min(260px, 86%); padding: 10px 12px; display: grid; gap: 4px; }
.sm-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.sm-row .pill { animation: smTag 6s var(--spring) infinite; }
.sm-row:nth-of-type(2) .pill { animation-delay: 1.2s; }
.sm-row:nth-of-type(3) .pill { animation-delay: 2.4s; }
@keyframes smTag { 0%, 15% { opacity: 0; transform: scale(.6); } 21%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.sm-lens { position: absolute; z-index: 2; left: 0; top: 0; width: 34px; height: 34px; color: var(--ink); filter: drop-shadow(0 4px 8px rgba(14, 15, 18, .2)); animation: smLens 6s ease-in-out infinite; }
@keyframes smLens { 0% { transform: translate(8px, 14px); } 15% { transform: translate(150px, 14px); } 20% { transform: translate(8px, 44px); } 35% { transform: translate(150px, 44px); } 40% { transform: translate(8px, 74px); } 55% { transform: translate(150px, 74px); } 70%, 100% { transform: translate(8px, 14px); } }

/* Build: o site monta bloco a bloco e a primeira loja vai ao ar */
.sb-wrap { width: min(260px, 88%); display: grid; gap: 10px; }
.sb-win { padding: 8px; display: grid; gap: 6px; }
.sb-bar { display: flex; gap: 4px; }
.sb-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.sb-hero { height: 34px; border-radius: 7px; background: linear-gradient(110deg, var(--blue-line), var(--blue-soft)); transform-origin: 0 50%; animation: sbHero 7s var(--ease) infinite; }
@keyframes sbHero { 0%, 4% { transform: scaleX(0); opacity: 0; } 14%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sb-grid i { height: 26px; border-radius: 6px; background: var(--bg-2); animation: sbPop 7s var(--spring) infinite; animation-delay: .9s; }
.sb-grid i:nth-child(2) { animation-delay: 1.3s; }
.sb-grid i:nth-child(3) { animation-delay: 1.7s; }
@keyframes sbPop { 0%, 6% { transform: scale(.4); opacity: 0; } 14%, 78% { transform: none; opacity: 1; } 88%, 100% { opacity: 0; } }
.sb-btn { justify-self: end; animation: sbBtn 7s var(--spring) infinite; animation-delay: 2.4s; }
@keyframes sbBtn { 0%, 4% { transform: scale(.5); opacity: 0; } 12%, 70% { transform: none; opacity: 1; } 80%, 100% { opacity: 0; } }
.sb-prog { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; }
.sb-prog > i { display: block; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.sb-prog > i b { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; animation: sbFill 7s ease-in-out infinite; }
@keyframes sbFill { 0% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
.sb-prog .pill { animation: sbLive 7s var(--spring) infinite; }
@keyframes sbLive { 0%, 62% { opacity: 0; transform: scale(.6); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Grow: as lojas acendem e a linha de pedidos sobe */
.sg-wrap { width: min(270px, 88%); display: grid; gap: 10px; }
.sg-stores { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-stores .pill { background: #fff; color: var(--muted); border: 1px solid var(--line); animation: sgOn 6s ease infinite; }
.sg-stores .pill:nth-child(2) { animation-delay: .8s; }
.sg-stores .pill:nth-child(3) { animation-delay: 1.6s; }
@keyframes sgOn { 0%, 10% { background: #fff; color: var(--muted); border-color: var(--line); } 16%, 88% { background: var(--blue); color: #fff; border-color: var(--blue); } 96%, 100% { background: #fff; color: var(--muted); border-color: var(--line); } }
.sg-chart { padding: 10px 10px 6px; }
.sg-chart svg { display: block; width: 100%; height: 76px; }
.sg-chart .ar { fill: var(--blue-soft); animation: sgArea 6s ease infinite; }
.sg-chart .ln { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; animation: sgLine 6s ease-in-out infinite; }
@keyframes sgLine { 0%, 10% { stroke-dashoffset: 100; } 60%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sgArea { 0%, 30% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sg-chart .k { display: flex; justify-content: space-between; margin-top: 4px; }

@media (max-width: 810px) {
  .gcard .ani { height: 140px; }
  .step-vis.ani { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .ani *, .ani *::before, .ani *::after, .step-k svg, .step-k svg * { animation: none !important; }
}

/* ======================================================================================================
   v2.3 · 22/10/2026 · Fase 3: home EN, /work e páginas de case
   Home: topo com lista de serviços e cartão do fundador (Fabrica) · clientes · grade de projetos com zoom e
   desfoque no hover (Fabrica) · mural de provas com contadores e anel (Optivio + Fabrica) · serviços em linhas
   com cenas animadas (madebykota) · estúdio · posts. Case: topo névoa, ficha, aparelhos, capítulos, galeria.
   ====================================================================================================== */

/* topo da home */
.ht { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.ht-l { display: grid; gap: 22px; justify-items: start; }
.ht .h1 { font-size: clamp(42px, 6vw, 84px); max-width: 15ch; }
.ht-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.lnk-w { color: #fff; font-weight: 500; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .45); transition: border-color .2s; }
.lnk-w:hover { border-color: #fff; }
.ht-r { display: grid; gap: 16px; }
.ht-r > .k { color: #DCE6FF; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ht-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.ht-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); color: #fff; text-decoration: none; font-size: 16px; }
.ht-list a::after { content: "\2197"; opacity: .55; transition: transform .35s var(--ease), opacity .2s; }
.ht-list a:hover::after { opacity: 1; transform: translate(2px, -2px); }
.ht-person { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.ht-person img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; object-position: 72% 40%; flex: none; }
.ht-person b { display: block; font-weight: 500; font-size: 15px; }
.ht-person span { display: block; font-size: 13px; color: #DCE6FF; }
.ht-person a { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: #fff; color: var(--ink); font: 500 13.5px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.ht-person a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.home-stage { margin-top: clamp(56px, 7vw, 88px); }
@media (max-width: 810px) {
  /* no celular o topo da home fica bem mais alto, e o degradê em % deixava a lista "What we build" no azul claro
     (branco a 2,6:1). Paradas em px: azul forte até o fim da lista (~4,2:1), clareia atrás do palco. */
  .home-top { background-image: var(--grain), linear-gradient(180deg, #0047E0 0, #0053F7 180px, #2A6CF8 760px, #3B74F8 960px, #A9C2FB 1250px, #E3E9F7 1420px, #F4F5F7 100%); }
  /* no celular o card do fundador cai na parte clara do degradê: vira cartão branco com texto escuro */
  .ht-person { background: rgba(255, 255, 255, .94); border-color: transparent; color: var(--ink); box-shadow: var(--sh-1); }
  .ht-person span { color: var(--muted); }
  .ht-person a { background: var(--ink); color: #fff; }
  .ht-person a::before { background: #fff; }
}

/* faixa de clientes */
.clients { padding-top: 10px; text-align: center; }
.clients .k { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cl-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px clamp(32px, 6vw, 80px); margin-top: 22px; }
.cl-row img { display: block; width: auto; }   /* logos dos clientes nas cores da marca (pedido do Rodrigo, 23/10: "o preto ficou estranho") */

/* grade de projetos (Fabrica) */
.proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.proj { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.proj-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.proj-bar b { font-weight: 500; font-size: 18px; letter-spacing: -.015em; }
.proj-bar span { font: 500 12px/1 var(--mono); color: var(--muted); }
.proj-dots { margin-left: auto; display: flex; gap: 5px; }
.proj-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: background-color .3s, transform .3s var(--ease); }
.proj:hover .proj-dots i:first-child { background: var(--blue); transform: scale(1.2); }
.proj-img { position: relative; aspect-ratio: 1.22; border-radius: 18px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); isolation: isolate; }
.proj-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--ease), filter .6s ease; }
.proj-img > .ani { position: absolute; inset: 0; border-radius: 0; transition: transform .9s var(--ease), filter .6s ease; }
.proj:hover .proj-img > img, .proj:hover .proj-img > .ani { transform: scale(1.13); filter: blur(7px) brightness(.62); }
.proj-logo { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.1); transition: opacity .45s ease, transform .7s var(--ease); pointer-events: none; }
.proj-logo img { width: 44%; max-width: 230px; height: auto; }
.proj:hover .proj-logo { opacity: 1; transform: none; }
.proj-go { position: absolute; z-index: 2; right: 14px; bottom: 14px; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--ink); font: 500 13.5px/1 var(--sans); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .5s var(--ease); }
.proj:hover .proj-go { opacity: 1; transform: none; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-tags .chip { font-size: 13px; padding: 5px 10px; }
.proj p.small { padding: 0 4px; }

/* Ernesto's: duas lojas, um site (cena) */
.a-one { display: grid; place-items: center; background: var(--haze); }
.ao-wrap { width: min(340px, 84%); display: grid; gap: 10px; }
.ao-st { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 13px; }
.ao-st .pill { background: var(--bg-2); color: var(--muted); animation: aoOld 6s ease infinite; }
.ao-st:nth-child(2) .pill { animation-delay: .4s; }
@keyframes aoOld { 0%, 30% { opacity: 1; text-decoration: none; } 40%, 92% { opacity: .35; text-decoration: line-through; } 100% { opacity: 1; } }
.ao-arrow { justify-self: center; width: 2px; height: 22px; background: var(--line-2); position: relative; overflow: hidden; }
.ao-arrow::after { content: ""; position: absolute; left: -3px; top: -8px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: aoDrop 1.6s ease-in infinite; }
@keyframes aoDrop { to { transform: translateY(30px); } }
.ao-one { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--blue); color: #fff; border-radius: 12px; font-weight: 500; font-size: 14px; box-shadow: 0 14px 30px -14px rgba(0, 83, 247, .6); animation: aoOne 6s var(--spring) infinite; }
.ao-one .pill { background: #fff; color: var(--blue); }
@keyframes aoOne { 0%, 34% { transform: scale(.94); opacity: .5; } 42%, 94% { transform: none; opacity: 1; } 100% { opacity: .5; } }

/* mural de provas */
.pbento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 12px; }
.pb { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.pb .k { font: 500 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pb-dark { grid-column: span 2; grid-row: span 2; justify-content: space-between; padding: clamp(22px, 3vw, 34px); background-color: var(--dark); background-image: var(--grain), radial-gradient(70% 70% at 100% 0%, rgba(0, 83, 247, .4), rgba(0, 83, 247, 0) 70%); background-size: 180px 180px, 100% 100%; color: var(--on-dark); border-color: transparent; }
.pb-dark .k { color: var(--on-dark-2); }
.pb-dark .h3 { font-size: clamp(28px, 3vw, 40px); max-width: 14ch; }
.pb-dark p { color: var(--on-dark-2); max-width: 420px; }
.pb-spark { width: 100%; height: 90px; }
.pb-spark path { fill: none; stroke: var(--blue-on-dark); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.8s var(--ease) .3s; }
.pb-spark .ar { fill: rgba(90, 141, 255, .14); stroke: none; opacity: 0; transition: opacity 1s ease 1.4s; }
.pb.in .pb-spark path, .pb-dark.in .pb-spark path { stroke-dashoffset: 0; }
.pb.in .pb-spark .ar { opacity: 1; }
.pb-num .nums { display: grid; gap: 4px; margin-top: auto; }
.pb-num b { font: 400 clamp(38px, 3.8vw, 56px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pb-num span { font-size: 15px; color: var(--muted); }
.pb-gauge { align-items: center; justify-content: center; text-align: center; }
.pb-gauge svg { width: 120px; height: 120px; rotate: -90deg; }
.pb-gauge circle { fill: none; stroke-width: 10; }
.pb-gauge .tr { stroke: var(--bg-2); }
.pb-gauge .fl { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.pb-gauge.in .fl { stroke-dashoffset: 0; }
.pb-gauge .val { position: absolute; top: calc(50% - 30px); left: 0; right: 0; font: 400 30px/1 var(--sans); letter-spacing: -.03em; }
.pb-gauge > span { font-size: 14.5px; color: var(--muted); }
.pb-gwrap { position: relative; display: grid; justify-items: center; gap: 10px; }
.pb-gwrap .val { position: absolute; top: 42px; }
.pb-photo { grid-column: span 2; padding: 0; border: 0; min-height: 220px; }
.pb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-photo .k { position: absolute; left: 14px; bottom: 14px; padding: 7px 10px; border-radius: 999px; background: rgba(14, 15, 18, .72); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pb-time { grid-column: span 2; }
.pb-time .tl { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pb-time .tl span { padding: 10px 8px; border-radius: 10px; background: var(--bg); font: 500 11px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; transition: background-color .4s ease, color .4s ease; transition-delay: calc(var(--i) * 280ms + .3s); }
.pb-time.in .tl span { background: var(--ink); color: #fff; }
.pb-time.in .tl span:last-child { background: var(--blue); }
.pb-time b { font: 400 clamp(38px, 3.8vw, 56px)/1 var(--sans); letter-spacing: -.045em; }
.pb-google .stars { display: flex; gap: 3px; color: var(--ink); margin-top: auto; }
.pb-google .stars svg { width: 20px; height: 20px; }
.pb-google b { font: 400 clamp(38px, 3.8vw, 56px)/1 var(--sans); letter-spacing: -.045em; }

/* serviços em linhas, cena de um lado e texto do outro (madebykota) */
.svc { display: grid; gap: 14px; }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(16px, 2.4vw, 28px); background: #fff; border: 1px solid var(--line); border-radius: 26px; }
.svc-row:nth-child(even) .svc-v { order: -1; }
.svc-t { display: grid; gap: 14px; align-content: start; padding: clamp(4px, 1vw, 10px); }
.svc-t p { color: var(--muted); }
.svc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-meta .chip { font-size: 13.5px; }
.svc-v { min-height: 300px; height: 100%; }
.svc-v.ani { display: grid; place-items: center; background: var(--haze); border-radius: 18px; }
.svc-v.ani::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; }
.collage { position: relative; min-height: 320px; border-radius: 18px; background: var(--haze); overflow: hidden; }
.collage img { position: absolute; display: block; border-radius: 12px; object-fit: cover; box-shadow: var(--sh-2); border: 4px solid #fff; transition: transform .7s var(--ease); }
.collage .c1 { left: 6%; top: 10%; width: 46%; aspect-ratio: 4 / 3; rotate: -5deg; }
.collage .c2 { right: 5%; top: 7%; width: 34%; aspect-ratio: 3 / 4; rotate: 4deg; }
.collage .c3 { left: 28%; bottom: 6%; width: 44%; aspect-ratio: 1.4; rotate: -1deg; z-index: 2; }
.svc-row:hover .collage .c1 { transform: translate(-8px, -4px); }
.svc-row:hover .collage .c2 { transform: translate(8px, -6px); }
.svc-row:hover .collage .c3 { transform: translateY(6px); }

/* painel de pedidos (cena do serviço de dashboard) */
.ad2 { width: min(330px, 88%); padding: 12px; display: grid; gap: 6px; }
.ad2-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; }
.ad2-top b { font-weight: 500; font-size: 13.5px; }
.ad2-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--bg); font-size: 12.5px; animation: adRow 7s var(--ease) infinite; }
.ad2-row:nth-child(3) { animation-delay: .5s; }
.ad2-row:nth-child(4) { animation-delay: 1s; }
.ad2-row:nth-child(5) { animation-delay: 1.5s; }
@keyframes adRow { 0%, 4% { opacity: 0; transform: translateY(10px); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ad2-st { display: grid; justify-items: end; }
.ad2-st .pill { grid-area: 1 / 1; }
.ad2-st .pill:first-child { animation: stA 7s ease infinite; }
.ad2-st .pill:last-child { animation: stB 7s ease infinite; }
.ad2-row:nth-child(3) .pill { animation-delay: .5s; }
.ad2-row:nth-child(4) .pill { animation-delay: 1s; }
.ad2-row:nth-child(5) .pill { animation-delay: 1.5s; }
@keyframes stA { 0%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes stB { 0%, 40% { opacity: 0; transform: scale(.8); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* estúdio (um time sênior; foto real do fundador) */
.studio { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.studio-ph { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--bg-2); }
.studio-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 40%; display: block; }
.studio-ph .tag { position: absolute; left: 14px; bottom: 14px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.studio-ph .tag b { font-weight: 500; font-size: 15px; }
.studio-ph .tag span { font-size: 13px; color: var(--muted); }
.studio-t { display: grid; gap: 18px; align-content: start; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); margin-top: 6px; }
.facts div { display: grid; gap: 6px; padding: 18px 16px 0 0; }
.facts b { font: 400 clamp(26px, 2.6vw, 36px)/1 var(--sans); letter-spacing: -.035em; }
.facts span { font-size: 14px; color: var(--muted); }

/* posts do blog */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post { display: grid; gap: 12px; align-content: start; color: var(--ink); text-decoration: none; }
.post-img { aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.post-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post-img img { transform: scale(1.05); }
.post .h4 { font-size: 19px; transition: color .2s; }
.post:hover .h4 { color: var(--blue); }

/* /work: título grande com contador (Fabrica "Projects²⁷") */
.work-top { padding-bottom: clamp(32px, 5vw, 64px); }
.big-t { font-size: clamp(64px, 12vw, 176px); line-height: .9; letter-spacing: -.06em; font-weight: 500; }
.big-t sup { font: 500 clamp(14px, 1.6vw, 22px)/1 var(--mono); letter-spacing: 0; vertical-align: top; position: relative; top: .5em; margin-left: .2em; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* página de case */
.case-top { display: grid; gap: 22px; }
.case-top .h1 { max-width: 18ch; }
.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 8px 0 0; border-top: 1px solid var(--line-2); }
.case-meta div { padding: 16px 16px 0 0; }
.case-meta dt { font: 500 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.case-meta dd { margin: 6px 0 0; font-size: 15.5px; font-weight: 500; }
.case-media { margin-top: clamp(32px, 5vw, 56px); }
.case-media .showcase-vis { aspect-ratio: 1.75; }
.case-media .showcase-vis .frame { left: 5%; top: 8%; width: 70%; }
.case-media .showcase-vis .phone { right: 8%; bottom: 7%; width: 19%; }
.media-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.chap { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 72px); padding-block: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line-2); }
.chap:first-child { border-top: 0; }
.chap-l { display: grid; gap: 12px; align-content: start; position: sticky; top: 96px; }
.chap-l .h2 { font-size: clamp(28px, 3.2vw, 42px); }
.chap-b { display: grid; gap: 22px; min-width: 0; }
.chap-b > p { font-size: 17.5px; color: var(--ink-2); max-width: 680px; }
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pain { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 6px; }
.pain b { font-weight: 500; font-size: 16.5px; }
.pain p { font-size: 15px; color: var(--muted); }
.built { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bi { display: grid; gap: 10px; align-content: start; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.bi .ani { height: 196px; }
.bi .a-drv, .bi .a-app { align-content: end; }
.bi .a-drv .ad-ph, .bi .a-app .ad-ph { margin-top: 0; }
.bi .a-dash { display: grid; align-content: center; justify-items: center; }
.bi .a-dash .ad2 { scale: .84; }
.bi b { font-weight: 500; font-size: 17px; letter-spacing: -.01em; padding: 0 6px; }
.bi p { font-size: 15px; color: var(--muted); padding: 0 6px 6px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 560px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > figure { margin: 0; scroll-snap-align: start; display: grid; gap: 8px; }
.rail img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.rail figcaption { font-size: 13.5px; color: var(--muted); }
.rail.tall { grid-auto-columns: min(46%, 300px); }
.rail.tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.rail-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.rail-nav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-size: 16px; transition: background-color .2s; }
.rail-nav button:hover { background: var(--bg-2); }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.res { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 6px; }
.res b { font: 400 clamp(26px, 2.6vw, 34px)/1.05 var(--sans); letter-spacing: -.03em; }
.res span { font-size: 15px; color: var(--muted); }
.plain { padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--blue-soft); display: grid; gap: 10px; }
.plain .k { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.plain p { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; letter-spacing: -.01em; }
.hood { font-size: 14.5px; color: var(--muted); padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--line-2); }
.hood b { color: var(--ink); font-weight: 500; }
.next-case { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(32px, 5vw, 56px); padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s, transform .4s var(--ease); }
.next-case:hover { border-color: var(--ink); transform: translateY(-2px); }
.next-case .k { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.next-case b { display: block; margin-top: 8px; font-size: clamp(26px, 3.4vw, 46px); font-weight: 500; letter-spacing: -.035em; }
.next-case .go { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 22px; transition: transform .4s var(--ease); }
.next-case:hover .go { transform: translateX(4px); }

@media (max-width: 1100px) {
  .pbento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ht { grid-template-columns: minmax(0, 1fr); }
  .ht-r { max-width: 520px; }
  .svc-row { grid-template-columns: minmax(0, 1fr); }
  .svc-row:nth-child(even) .svc-v { order: 0; }
  .studio { grid-template-columns: minmax(0, 1fr); }
  .studio-ph { max-width: 420px; }
  .chap { grid-template-columns: minmax(0, 1fr); }
  .chap-l { position: static; }
}
@media (max-width: 810px) {
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .proj-logo { opacity: 0 !important; }
  .proj:hover .proj-img > img, .proj:hover .proj-img > .ani { transform: none; filter: none; }
  .proj-go { opacity: 1; transform: none; }
  .pbento { grid-template-columns: minmax(0, 1fr); }
  .pb-dark, .pb-photo, .pb-time { grid-column: auto; grid-row: auto; }
  .pb-photo { min-height: 240px; }
  .posts { grid-template-columns: minmax(0, 1fr); }
  .posts .post:nth-child(n+2) { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .posts .post:nth-child(n+2) .post-img { grid-row: span 2; }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pains, .built, .results { grid-template-columns: minmax(0, 1fr); }
  .case-media .showcase-vis { aspect-ratio: 1.3; }
  .case-media .showcase-vis .frame { width: 76%; }
  .case-media .showcase-vis .phone { width: 26%; right: 4%; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts div { padding-right: 8px; }
  .collage { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-spark path, .pb-gauge .fl { transition: none; stroke-dashoffset: 0; }
  .pb-spark .ar { opacity: 1; transition: none; }
  .pb-time .tl span { transition: none; }
  .proj-img > img, .proj-img > .ani, .post-img img, .collage img { transition: none; }
}
html:not(.js) .pb-gauge .fl, html:not(.js) .pb-spark path { stroke-dashoffset: 0; }
html:not(.js) .pb-spark .ar { opacity: 1; }
/* o contador herda o tamanho do número em qualquer componente (regras de rótulo tipo ".x span" não podem encolher o número) */
.cnt, .cnt > span { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; max-width: none !important; display: inline-grid; }
.cnt > span { display: inline; }

/* cardápio animado na TV (case Quesito's): linhas acendem e o preço alterna entre dinheiro e cartão */
.a-tv { display: grid; place-items: center; background: var(--haze); }
.tv { display: grid; justify-items: center; }
.tv-scr { width: 250px; padding: 12px 14px; display: grid; gap: 6px; border: 7px solid var(--ink); border-radius: 10px; background: #fff; box-shadow: var(--sh-2); }
.tv-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; animation: tvRow 6s ease infinite; }
.tv-row i { display: block; height: 7px; border-radius: 4px; background: var(--bg-2); }
.tv-row b { display: grid; font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tv-row b span { grid-area: 1 / 1; }
.tv-row b span:first-child { animation: tvA 6s ease infinite; }
.tv-row b span:last-child { animation: tvB 6s ease infinite; }
.tv-row:nth-of-type(2) { animation-delay: 1s; }
.tv-row:nth-of-type(3) { animation-delay: 2s; }
@keyframes tvRow { 0%, 8% { background: transparent; } 12%, 28% { background: var(--blue-soft); } 34%, 100% { background: transparent; } }
@keyframes tvA { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tvB { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
.tv-pay { display: flex; justify-content: flex-end; gap: 5px; margin-top: 2px; }
.tv-pay .pill:first-child { animation: tvPayA 6s ease infinite; background: var(--ink); color: #fff; }
.tv-pay .pill:last-child { animation: tvPayB 6s ease infinite; background: var(--bg-2); color: var(--muted); }
@keyframes tvPayA { 0%, 46% { background: var(--ink); color: #fff; } 50%, 96% { background: var(--bg-2); color: var(--muted); } }
@keyframes tvPayB { 0%, 46% { background: var(--bg-2); color: var(--muted); } 50%, 96% { background: var(--blue); color: #fff; } }
.tv-stand { width: 54px; height: 16px; background: linear-gradient(var(--ink), var(--ink)) center top / 10px 10px no-repeat, linear-gradient(var(--ink), var(--ink)) center bottom / 54px 5px no-repeat; }
.bi.wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.bi.wide .ani { height: 190px; }
@media (max-width: 810px) { .bi.wide { grid-template-columns: minmax(0, 1fr); } }
.showcase-vis > .ani { position: absolute; inset: 0; border-radius: 0; }
.chap-b > *, .chap > *, .case-top > * { min-width: 0; }

/* app do cliente (case Garlic'n Lemons): o último pedido, um toque em "Order again" e o aviso de pronto */
.a-app { display: grid; justify-items: center; }
.aa-ph { padding-top: 30px; gap: 6px; }
.aa-ph::after { content: none; }
.aa-last { display: grid; gap: 4px; padding: 7px 8px; border-radius: 8px; background: var(--bg); }
.aa-last b { font: 500 10.5px/1.1 var(--sans); }
.aa-btn { position: relative; display: grid; padding: 6px 0; border-radius: 999px; background: var(--blue); color: #fff; font: 500 9.5px/1 var(--sans); text-align: center; animation: aaBtn 6s ease infinite; }
.aa-btn span { grid-area: 1 / 1; }
.aa-btn span:first-child { animation: aaA 6s ease infinite; }
.aa-btn span:last-child { opacity: 0; animation: aaB 6s ease infinite; }
.aa-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; animation: aaTap 6s ease infinite; }
@keyframes aaBtn { 0%, 22% { transform: none; background: var(--blue); } 26% { transform: scale(.94); } 32%, 90% { transform: none; background: var(--ink); } 100% { background: var(--blue); } }
@keyframes aaA { 0%, 28% { opacity: 1; } 32%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes aaB { 0%, 28% { opacity: 0; } 32%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aaTap { 0%, 18% { opacity: 0; transform: scale(1.6); } 24% { opacity: .8; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(.6); } }
.aa-ok { position: absolute; z-index: 2; left: 50%; top: 20px; translate: -50% 0; animation: aaOk 6s var(--ease) infinite; }
@keyframes aaOk { 0%, 34% { opacity: 0; transform: translateY(-10px); } 40%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-10px); } }
/* cena no lugar do print do hero (case Ernesto's): larga no desktop, mais alta no celular para a cena caber */
.showcase-vis.is-scene { aspect-ratio: 2.5; }
.showcase-vis.is-scene .ao-wrap { scale: 1.55; }
@media (max-width: 810px) { .showcase-vis.is-scene { aspect-ratio: 1.5; } .showcase-vis.is-scene .ao-wrap { scale: 1; } }

/* ======================================================================================================
   v2.4 · 23/10/2026 · iPhone minimalista com tela que anda (pedido do Rodrigo: "borda grossa, horrível; mockup
   minimalista de iPhone, encaixar o print e animar a tela"). Proporção do iPhone 15 (71,6 x 147,6 mm), moldura de
   3,4% da largura, ilha de 30%, barra de status na cor da página (--sb, --sb-ink). Medidas internas em cqw/cqh da
   própria tela, então o aparelho fica certo em qualquer tamanho.
   .iph--scroll rola um print alto em 4 paradas (--k = fração da página que rola, --dur = duração do ciclo).
   .iph--slides passa as telas de lado, como alguém usando o app. Com data-anim, só anda com o aparelho na tela.
   ====================================================================================================== */
.iph { position: relative; aspect-ratio: 71.6 / 147.6; border-radius: 15.5% / 7.5%; background: #111214;
  box-shadow: inset 0 0 0 1.5px #3B3D44, 0 0 0 1px rgba(14, 15, 18, .06), 0 34px 60px -30px rgba(0, 30, 100, .5), 0 10px 22px -14px rgba(14, 15, 18, .4); }
.iph-scr { position: absolute; inset: 1.65% 3.4%; overflow: hidden; border-radius: 12.8% / 6%; background: var(--sb, #fff); container-type: size; }
.iph-sb { position: absolute; z-index: 2; inset: 0 0 auto; height: 13cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 8.5cqw 0 10cqw; background: var(--sb, #fff); color: var(--sb-ink, #0E0F12); font: 600 4.4cqw/1 var(--sans); letter-spacing: -.01em; }
.iph-sb::before { content: ""; position: absolute; left: 50%; top: 2.8cqw; width: 30cqw; height: 8.4cqw; translate: -50% 0; border-radius: 999px; background: #000; }
.iph-sb i { position: relative; width: 6.6cqw; height: 3.3cqw; border-radius: 1.1cqw; border: .45cqw solid currentColor; opacity: .85; }
.iph-sb i::after { content: ""; position: absolute; inset: .45cqw 1.3cqw .45cqw .45cqw; border-radius: .4cqw; background: currentColor; }
.iph-view { position: absolute; inset: 13cqw 0 0; overflow: hidden; container-type: size; }
.iph-view img { display: block; width: 100%; height: auto; }
.iph--scroll .iph-view img { animation: shotScroll var(--dur, 16s) cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes shotScroll {
  0%, 7% { translate: 0 0; }
  21%, 28% { translate: 0 calc((100cqh - 100%) * var(--k, 1) * .25); }
  42%, 49% { translate: 0 calc((100cqh - 100%) * var(--k, 1) * .5); }
  63%, 70% { translate: 0 calc((100cqh - 100%) * var(--k, 1) * .75); }
  84%, 91% { translate: 0 calc((100cqh - 100%) * var(--k, 1)); }
  100% { translate: 0 0; }
}
.iph-track { display: flex; height: 100%; animation: iphSlide 15s cubic-bezier(.65, 0, .35, 1) infinite; }
.iph-track img { flex: none; width: 100cqw; height: 100%; object-fit: cover; object-position: top; }
@keyframes iphSlide { 0%, 20% { translate: 0 0; } 25%, 45% { translate: -100cqw 0; } 50%, 70% { translate: -200cqw 0; } 75%, 93% { translate: -300cqw 0; } 100% { translate: 0 0; } }
/* print alto do desktop rola devagar dentro da moldura, com atraso para não andar junto com o celular */
.frame-shot.scroll { container-type: size; overflow: hidden; }
.frame-shot.scroll > img { inset: 0 0 auto; height: auto; object-fit: fill; animation: shotScroll var(--dur, 22s) cubic-bezier(.65, 0, .35, 1) -3s infinite; }
/* posição no palco: encosta na quina de baixo e passa um pouco por cima da moldura */
.showcase-vis .iph { position: absolute; z-index: 2; right: 6%; bottom: 6%; width: 19%; }
.case-media .showcase-vis .iph { right: 7%; bottom: 6%; width: 18%; }
@media (max-width: 810px) { .case-media .showcase-vis .iph { width: 24%; right: 4%; bottom: 5%; } }
@media (max-width: 600px) { .showcase-vis .iph { width: 25%; right: 4%; bottom: 5%; } }
@media (prefers-reduced-motion: reduce) { .iph-view img, .iph-track, .frame-shot.scroll > img { animation: none !important; } }

/* ======================================================================================================
   v2.5 · 23/10/2026 · prova com movimento (pedido do Rodrigo: "melhorar o gráfico do primeiro card e colocar mais
   motion nos cards, está muito estático"). Tudo em loop e só com o card na tela ([data-anim] + .play). Com movimento
   reduzido, cada card mostra o estado completo e parado.
   ====================================================================================================== */
/* card escuro: pedidos por dia (forma de exemplo, rotulada "Sample month") e avisos de pedido chegando */
.pc { position: relative; display: grid; gap: 10px; margin-top: 28px; padding: 16px 16px 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.pb-dark .pc .k { color: var(--on-dark-2); font-size: 10.5px; }
.pc-top, .pc-axis { display: flex; justify-content: space-between; align-items: center; }
.pc-live { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--on-dark); }
.pc-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-on-dark); animation: ping 2s ease-in-out infinite; }
.pc-bars { height: clamp(110px, 12vw, 160px); display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: clamp(2px, .35vw, 5px); background: repeating-linear-gradient(to top, rgba(255, 255, 255, .07) 0 1px, transparent 1px 25%); }
.pc-bars i { display: block; height: calc(var(--h) * 1%); border-radius: 3px 3px 1px 1px; background: rgba(255, 255, 255, .22); transform-origin: 50% 100%; animation: pcBar 9s cubic-bezier(.16, 1, .3, 1) calc(var(--d) * 50ms) infinite backwards; }
.pc-bars i:nth-child(n+24) { background: var(--blue-on-dark); }
.pc-bars i:last-child { background: #fff; }
@keyframes pcBar { 0% { transform: scaleY(0); } 18%, 86% { transform: scaleY(1); } 94%, 100% { transform: scaleY(0); } }
.pc-toast, .pp-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 12px; line-height: 1.3; }
.pc-toast { left: 14px; top: 44px; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .7); animation: pcToast 9s var(--ease) 1.6s infinite backwards; }
.pc-toast.t2 { opacity: 0; animation-delay: 6.1s; }
.pc-toast > span, .pp-chip > span { color: var(--muted); }
.pc-toast b, .pp-chip b { display: block; font-weight: 500; font-size: 13px; color: var(--ink); }
.pc-toast i, .pp-chip i { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / 15px no-repeat; }
@keyframes pcToast { 0% { opacity: 0; transform: translateY(-10px) scale(.96); } 5%, 40% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-6px); } }
/* cards de número: a linha do mês se desenha e o ponto de hoje acende */
.pb-mini { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.pb-mini .ln { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: pmDraw 8s var(--ease) infinite backwards; }
.pb-mini .ar { fill: var(--blue-soft); animation: pmArea 8s ease infinite backwards; }
.pb-mini .dot { fill: var(--blue); stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: pmDot 8s var(--spring) infinite backwards; }
.pb-mini.b .ln, .pb-mini.b .ar, .pb-mini.b .dot { animation-delay: 1.2s; }
@keyframes pmDraw { 0% { stroke-dashoffset: 100; } 30%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pmArea { 0%, 18% { opacity: 0; } 34%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes pmDot { 0%, 28% { transform: scale(0); } 33%, 90% { transform: scale(1); } 97%, 100% { transform: scale(0); } }
/* 100%: o anel enche de novo a cada ciclo e brilha ao completar */
.pb-gauge .fl { transition: none; animation: pgFill 8s var(--ease) .2s infinite backwards; }
.pb-gwrap svg { animation: pgGlow 8s ease .2s infinite backwards; }
@keyframes pgFill { 0% { stroke-dashoffset: 100; } 30%, 88% { stroke-dashoffset: 0; opacity: 1; } 95% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes pgGlow { 0%, 28% { filter: none; } 34% { filter: drop-shadow(0 0 12px rgba(0, 83, 247, .45)); } 48%, 100% { filter: none; } }
/* estrelas acendem uma a uma */
.pb-google .stars svg { animation: pgStar 7s var(--spring) infinite backwards; }
.pb-google .stars svg:nth-child(2) { animation-delay: .15s; }
.pb-google .stars svg:nth-child(3) { animation-delay: .3s; }
.pb-google .stars svg:nth-child(4) { animation-delay: .45s; }
.pb-google .stars svg:nth-child(5) { animation-delay: .6s; }
@keyframes pgStar { 0% { color: var(--line-2); transform: scale(.55); } 9%, 86% { color: var(--ink); transform: none; } 94%, 100% { color: var(--line-2); transform: scale(.55); } }
/* 30 dias: contador de dias, barra que anda e cada etapa acende quando a barra chega nela */
@property --day { syntax: "<integer>"; inherits: false; initial-value: 30; }
.pt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pt-day { --day: 30; counter-reset: day var(--day); font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue); font-variant-numeric: tabular-nums; animation: ptDay 9s linear infinite backwards; }
.pt-day::after { content: "Day " counter(day); }
@keyframes ptDay { 0% { --day: 1; } 60%, 100% { --day: 30; } }
.pb-time .tl span { transition: none; animation: ptP0 9s ease infinite backwards; }
.pb-time .tl span:nth-child(2) { animation-name: ptP1; }
.pb-time .tl span:nth-child(3) { animation-name: ptP2; }
.pb-time .tl span:nth-child(4) { animation-name: ptP3; }
@keyframes ptP0 { 0%, 1% { background: var(--bg); color: var(--muted); } 3%, 90% { background: var(--ink); color: #fff; } 95%, 100% { background: var(--bg); color: var(--muted); } }
@keyframes ptP1 { 0%, 14% { background: var(--bg); color: var(--muted); } 16%, 90% { background: var(--ink); color: #fff; } 95%, 100% { background: var(--bg); color: var(--muted); } }
@keyframes ptP2 { 0%, 29% { background: var(--bg); color: var(--muted); } 31%, 90% { background: var(--ink); color: #fff; } 95%, 100% { background: var(--bg); color: var(--muted); } }
@keyframes ptP3 { 0%, 44% { background: var(--bg); color: var(--muted); } 46%, 90% { background: var(--blue); color: #fff; } 95%, 100% { background: var(--bg); color: var(--muted); } }
.pt-bar { height: 4px; margin-top: 2px; border-radius: 2px; background: var(--bg-2); overflow: hidden; }
.pt-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; animation: ptBar 9s linear infinite backwards; }
@keyframes ptBar { 0% { transform: scaleX(0); } 60%, 90% { transform: scaleX(1); opacity: 1; } 95%, 100% { transform: scaleX(1); opacity: 0; } }
/* foto: zoom lento e o aviso de entrega do app do motorista */
.pb-photo img { animation: pbKen 20s ease-in-out infinite alternate; }
@keyframes pbKen { from { transform: none; } to { transform: scale(1.09) translate(-1.5%, -1%); } }
.pp-chip { z-index: 1; left: 16px; bottom: 16px; box-shadow: var(--sh-2); animation: ppChip 7s var(--ease) 1s infinite backwards; }
.pp-chip i { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-size: 14px; }
@keyframes ppChip { 0% { opacity: 0; transform: translateY(12px); } 6%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .pc-bars i, .pc-toast, .pc-live::before, .pb-mini *, .pb-gauge .fl, .pb-gwrap svg, .pb-google .stars svg, .pt-day, .pb-time .tl span, .pt-bar i, .pb-photo img, .pp-chip { animation: none !important; }
}
/* 23/10: no card "Branded driver app" da home o celular aberto embaixo parecia cortado. Onde cabe inteiro (serviços da
   home e cards dos cases), o aparelho fecha embaixo; no card baixo do /ordering ele continua saindo da borda. */
.svc-v .ad-ph, .bi .ad-ph { height: 176px; margin-top: 0; border-bottom: 6px solid var(--ink); border-radius: 24px; }
.svc-v .ad-ph { scale: 1.3; }
.bi .a-drv, .bi .a-app { align-content: center; }
.svc-v .ad-ph { height: 196px; }

/* ======================================================================================================
   v2.6 · 23/10/2026 · cases BR (Entre Mareas). Cenas: Charm Bar (charms caem na corrente e a peça fica montada),
   dois estoques (cada pedido vai para o estoque do país) e o painel de produtos (reusa .ad2). Mesmo padrão .ani.
   ====================================================================================================== */
.a-charm { display: grid; place-items: center; background: var(--haze); }
.ac-svg { width: min(300px, 88%); height: auto; overflow: visible; }
.ac-chain { fill: none; stroke: #B8913A; stroke-width: 2.4; stroke-dasharray: 5 2.5; stroke-linecap: round; }
.ac-c line { stroke: #B8913A; stroke-width: 1.6; }
.ac-c .gold { fill: #E2BF63; stroke: #9C7A2E; stroke-width: 1; stroke-linejoin: round; }
.ac-c .pearl { fill: #fff; stroke: #C9B27A; stroke-width: 1.4; }
.ac-c .ln { fill: none; stroke: #9C7A2E; stroke-width: 1; stroke-linecap: round; }
.ac-c { transform-box: fill-box; transform-origin: 50% 0; animation: acDrop 7s var(--spring) infinite backwards; animation-delay: calc(var(--d) * .45s); }
@keyframes acDrop { 0% { opacity: 0; translate: 0 -46px; rotate: -18deg; } 9% { opacity: 1; translate: 0 0; rotate: 8deg; } 14%, 86% { opacity: 1; translate: 0 0; rotate: 0deg; } 93%, 100% { opacity: 0; translate: 0 0; } }
.ac-k { position: absolute; left: 12px; top: 12px; }
.ac-pill { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; animation: acPill 7s var(--ease) infinite backwards; }
@keyframes acPill { 0%, 38% { opacity: 0; transform: translateY(8px); } 44%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
.a-route { background: var(--haze); }
.ar-st { position: absolute; bottom: 14px; width: 40%; padding: 10px 12px; display: grid; gap: 6px; animation: arHit 8s ease infinite backwards; }
.ar-st.l { left: 6%; }
.ar-st.r { right: 6%; animation-name: arHitR; }
.ar-st b { font: 400 22px/1 var(--sans); letter-spacing: -.02em; }
@keyframes arHit { 0%, 26% { box-shadow: var(--sh-1); } 30%, 40% { box-shadow: 0 0 0 2px var(--ink), var(--sh-1); } 46%, 100% { box-shadow: var(--sh-1); } }
@keyframes arHitR { 0%, 70% { box-shadow: var(--sh-1); } 74%, 84% { box-shadow: 0 0 0 2px var(--blue), var(--sh-1); } 90%, 100% { box-shadow: var(--sh-1); } }
.ar-ord { position: absolute; left: 50%; top: 16px; translate: -50% 0; opacity: 0; }
.ar-ord.o1 { animation: arO1 8s cubic-bezier(.65, 0, .35, 1) infinite backwards; }
.ar-ord.o2 { animation: arO2 8s cubic-bezier(.65, 0, .35, 1) infinite backwards; }
@keyframes arO1 { 0%, 4% { opacity: 0; transform: translate(0, -8px); } 8%, 14% { opacity: 1; transform: none; } 28% { opacity: 1; transform: translate(-26cqw, 46px) scale(.9); } 32%, 100% { opacity: 0; transform: translate(-26cqw, 52px) scale(.8); } }
@keyframes arO2 { 0%, 48% { opacity: 0; transform: translate(0, -8px); } 52%, 58% { opacity: 1; transform: none; } 72% { opacity: 1; transform: translate(26cqw, 46px) scale(.9); } 76%, 100% { opacity: 0; transform: translate(26cqw, 52px) scale(.8); } }
.a-route { container-type: inline-size; }
/* faixa do celular sozinho (capítulo "No celular") */
.phone-solo { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px) 0; border-radius: 20px; background: var(--haze); }
.phone-solo .iph { width: min(250px, 58%); }
.legal nav button[data-consent-open] { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.legal nav button[data-consent-open]:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ac-c, .ac-pill, .ar-st, .ar-ord { animation: none !important; } .ar-ord { display: none; } }
.talk-side .big--long { font-size: clamp(52px, 7.4vw, 112px); } /* "Vamos conversar." (BR) é mais longo que "Let's talk." */

/* ======================================================================================================
   v2.7 · 23/10/2026 · /servicos/lojas-virtuais (BR): cenas de pagamento no Pix, pedido caindo no ERP e estoque
   igual no site e no ERP; logos BR com nome ao lado (.lg-t). Mesmo padrão .ani (estado parado = cena completa).
   ====================================================================================================== */
.lg-t { display: inline-flex; align-items: center; gap: 9px; font: 500 19px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.lg-t img { height: 22px; width: auto; }
.a-pix, .a-erp, .a-stock { display: grid; place-items: center; background: var(--haze); }
.px-card { position: relative; width: min(250px, 84%); padding: 12px; display: grid; gap: 10px; }
.px-top { display: flex; justify-content: space-between; align-items: baseline; }
.px-top b { font: 500 16px/1 var(--sans); letter-spacing: -.01em; }
.px-opts { display: flex; gap: 5px; }
.px-opts .pill:not(.ink) { background: var(--bg-2); color: var(--muted); }
.px-qr { position: relative; justify-self: center; width: 64px; height: 64px; border-radius: 6px; background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 8px 8px; animation: pxQr 7s ease infinite backwards; }
.px-qr i { position: absolute; width: 18px; height: 18px; border: 4px solid var(--ink); border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--ink); }
.px-qr i:nth-child(1) { left: 0; top: 0; } .px-qr i:nth-child(2) { right: 0; top: 0; } .px-qr i:nth-child(3) { left: 0; bottom: 0; }
@keyframes pxQr { 0%, 34% { opacity: 1; filter: none; } 40%, 88% { opacity: .18; filter: blur(1px); } 96%, 100% { opacity: 1; filter: none; } }
.px-ok { position: absolute; left: 50%; bottom: 34px; translate: -50% 0; animation: pxOk 7s var(--spring) infinite backwards; }
@keyframes pxOk { 0%, 34% { opacity: 0; transform: scale(.6); } 40%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.8); } }
.a-erp { container-type: inline-size; }
.er-erp { position: absolute; right: 8%; top: 50%; translate: 0 -50%; width: 46%; padding: 11px 12px; display: grid; gap: 8px; }
.er-top { display: flex; justify-content: space-between; align-items: center; }
.er-top img { height: 16px; width: auto; }
.er-rows { display: grid; gap: 5px; }
.er-rows i { display: block; height: 7px; border-radius: 4px; background: var(--bg-2); transform-origin: 0 50%; animation: erRow 7s ease infinite backwards; }
.er-rows i:nth-child(2) { width: 80%; animation-delay: .15s; } .er-rows i:nth-child(3) { width: 60%; animation-delay: .3s; }
@keyframes erRow { 0%, 34% { background: var(--bg-2); } 40%, 88% { background: var(--blue-line); } 96%, 100% { background: var(--bg-2); } }
.er-nf { justify-self: start; animation: erNf 7s var(--spring) infinite backwards; }
@keyframes erNf { 0%, 42% { opacity: 0; transform: scale(.7); } 48%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.er-ord { position: absolute; left: 8%; top: 50%; translate: 0 -50%; display: grid; gap: 4px; padding: 10px 12px; animation: erOrd 7s cubic-bezier(.65, 0, .35, 1) infinite backwards; }
.er-ord b { font: 500 15px/1 var(--sans); }
@keyframes erOrd { 0%, 8% { opacity: 0; transform: translateY(10px); } 14%, 22% { opacity: 1; transform: none; } 34% { opacity: 1; transform: translateX(34cqw) scale(.86); } 38%, 100% { opacity: 0; transform: translateX(36cqw) scale(.8); } }
.a-stock { grid-auto-flow: column; gap: 10px; align-content: center; justify-content: center; }
.st-card { width: 104px; padding: 10px 12px; display: grid; gap: 6px; }
.st-n { display: grid; font: 400 30px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.st-n span { grid-area: 1 / 1; }
.st-n span:first-child { animation: stOld 7s ease infinite backwards; }
.st-n span:last-child { opacity: 0; animation: stNew 7s ease infinite backwards; }
@keyframes stOld { 0%, 30% { opacity: 1; transform: none; } 36%, 90% { opacity: 0; transform: translateY(-10px); } 96%, 100% { opacity: 1; transform: none; } }
@keyframes stNew { 0%, 30% { opacity: 0; transform: translateY(10px); } 36%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.st-p { font-size: 11.5px; color: var(--muted); }
.st-sync { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; animation: stSpin 7s ease infinite backwards; }
.st-sync svg { width: 15px; height: 15px; }
@keyframes stSpin { 0%, 26% { rotate: 0deg; } 36%, 100% { rotate: 360deg; } }
.st-sale { position: absolute; left: 50%; top: 12px; translate: -50% 0; animation: stSale 7s var(--spring) infinite backwards; }
@keyframes stSale { 0%, 10% { opacity: 0; transform: translateY(-8px); } 16%, 40% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .px-qr, .px-ok, .er-rows i, .er-nf, .er-ord, .st-n span, .st-sync, .st-sale { animation: none !important; } .px-ok, .er-ord, .st-sale { display: none; } .st-n span:first-child { opacity: 0; } .st-n span:last-child { opacity: 1; } }
/* topo de campanha sem formulário (BR: contato pelo WhatsApp) */
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }
.hero-link { color: #fff; font-weight: 500; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .55); }
.hero-link:hover { border-color: #fff; }
.stage-phone .iph { width: 100%; }
.rc-row { align-items: center; } .rc-row span:last-child { white-space: nowrap; } /* rótulo em 2 linhas no celular: o valor não estica nem quebra */
/* "Prova real" em slide (lojas no ar, BR, 23/10: "está estático"): moldura com as telas passando e o iPhone ao lado */
.lj-stage { position: relative; width: 100%; padding: 0 9% 10% 0; }
.lj-stage .frame { box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), var(--sh-2); }
.lj-stage .frame-bar { height: 30px; }
.lj-stage .iph { position: absolute; right: 0; bottom: 0; z-index: 2; width: 24%; }
.sys-m .lj-stage { padding: 0 11% 14% 0; }
.sys-m .lj-stage .iph { width: 29%; }
.sys-m .lj-stage .frame-bar .url { display: none; }
.iph--slides.n3 .iph-track { animation-name: iphSlide3; }
@keyframes iphSlide3 { 0%, 28% { translate: 0 0; } 33%, 61% { translate: -100cqw 0; } 66%, 93% { translate: -200cqw 0; } 100% { translate: 0 0; } }

/* ======================================================================================================
   v2.8 · 23/10/2026 · home BR (M2, base SpartanAI): frase que escurece com a rolagem, palavra gigante correndo,
   serviços em acordeão horizontal, "Quem faz" com moldura de cantoneiras e os 4 pilares, cenas de marca e anúncio.
   ====================================================================================================== */
.statement { font: 400 clamp(30px, 4.2vw, 54px)/1.12 var(--sans); letter-spacing: -.035em; max-width: 1080px; text-wrap: balance; }
html.js [data-reveal] .w { opacity: .16; transition: opacity .35s ease; }
html.js [data-reveal] .w.on { opacity: 1; }
.giant { margin: 0 0 clamp(28px, 4vw, 48px); -webkit-mask-image: none; mask-image: none; }
.giant .ticker-half { align-items: center; }
.giant .ticker-half span { padding: 0 .18em; font: 500 clamp(84px, 13vw, 200px)/.95 var(--sans); letter-spacing: -.06em; color: var(--ink); }
.giant .ticker-half i { flex: none; width: clamp(48px, 7vw, 110px); height: clamp(48px, 7vw, 110px); margin: 0 .3em; color: var(--line-2); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 2h2.8v7.2l5.1-5.1 2 2-5.1 5.1H22v2.8h-6.6l5.1 5.1-2 2-5.1-5.1V22h-2.8v-6.6l-5.1 5.1-2-2 5.1-5.1H2v-2.8h7.2L4.1 6.1l2-2 5.1 5.1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.6 2h2.8v7.2l5.1-5.1 2 2-5.1 5.1H22v2.8h-6.6l5.1 5.1-2 2-5.1-5.1V22h-2.8v-6.6l-5.1 5.1-2-2 5.1-5.1H2v-2.8h7.2L4.1 6.1l2-2 5.1 5.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* acordeão horizontal de serviços */
.hacc-wrap { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.75fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.hacc { display: flex; gap: 10px; height: clamp(500px, 44vw, 600px); }
.hacc-it { position: relative; flex: 0 0 62px; min-width: 0; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: flex-grow .6s var(--ease), flex-basis .6s var(--ease), background-color .3s; }
.hacc-it.on { flex: 1 1 0; }
.hacc-it:not(.on):hover { background: var(--bg); }
.hacc-btn { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 16px 8px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hacc-it.on .hacc-btn { inset: 0 0 auto; height: 64px; align-items: flex-start; padding: 16px; pointer-events: none; }
.hacc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.hacc-it.on .hacc-n { background: var(--ink); border-color: var(--ink); color: #fff; }
.hacc-v { writing-mode: vertical-rl; rotate: 180deg; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.hacc-it.on .hacc-v { display: none; }
.hacc-body { position: absolute; inset: 0; min-width: 0; padding: 76px 26px 24px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 12px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.hacc-it.on .hacc-body { opacity: 1; visibility: visible; transition: opacity .5s ease .2s, visibility 0s; }
.hacc-body .h3 { font-size: clamp(24px, 2.2vw, 30px); }
.hacc-body p { color: var(--muted); max-width: 46ch; }
.hacc-vis { align-self: end; }
.hacc-vis .ani { height: clamp(190px, 17vw, 240px); }
@media (max-width: 960px) {
  .hacc-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 810px) {
  .hacc { flex-direction: column; height: auto; gap: 8px; }
  .hacc-it { flex: none; }
  .hacc-btn { position: relative; inset: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 14px; }
  .hacc-it.on .hacc-btn { height: auto; }
  .hacc-v { writing-mode: horizontal-tb; rotate: none; font-size: 13px; }
  .hacc-it.on .hacc-v { display: inline; }
  .hacc-body { position: static; min-width: 0; display: none; padding: 0 16px 18px; }
  .hacc-it.on .hacc-body { display: grid; }
}
/* "Quem faz": foto com moldura de cantoneiras, manifesto e os 4 pilares */
.vision { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cframe { position: relative; margin: 0; padding: 12px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.cframe img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 74% 40%; border-radius: 16px; }
.cframe::after { content: ""; position: absolute; inset: 22px; pointer-events: none; border-radius: 10px;
  background: linear-gradient(#fff, #fff) left top / 18px 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) right top / 18px 2px no-repeat, linear-gradient(#fff, #fff) right top / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 18px 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 18px 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px 18px no-repeat; }
.cframe figcaption { display: grid; gap: 2px; padding: 12px 4px 2px; }
.cframe figcaption b { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cframe figcaption span { font-size: 13px; color: var(--muted); }
.manifesto { font: 400 clamp(26px, 3.2vw, 44px)/1.15 var(--sans); letter-spacing: -.03em; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(36px, 5vw, 64px); }
.pillars div { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.pillars .k { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--blue); }
.pillars b { font-weight: 500; font-size: 17px; }
.pillars p { font-size: 14.5px; color: var(--muted); }
@media (max-width: 810px) { .vision { grid-template-columns: minmax(0, 1fr); } .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cframe { max-width: 420px; } }
/* cena de marca: cores, tipo e símbolo aparecem e montam a identidade */
.a-brand { display: grid; place-items: center; background: var(--haze); }
.ab-wrap { display: grid; grid-template-columns: auto auto; gap: 10px; align-items: stretch; }
.ab-mark { grid-row: span 2; width: 96px; display: grid; place-items: center; border-radius: 14px; background: var(--ink); color: #fff; font: 500 34px/1 var(--sans); letter-spacing: -.04em; animation: abPop 7s var(--spring) infinite backwards; }
.ab-sw { display: flex; gap: 6px; }
.ab-sw i { width: 26px; height: 26px; border-radius: 8px; animation: abPop 7s var(--spring) infinite backwards; }
.ab-sw i:nth-child(1) { background: var(--blue); animation-delay: .3s; } .ab-sw i:nth-child(2) { background: #E2BF63; animation-delay: .45s; } .ab-sw i:nth-child(3) { background: #F4F5F7; border: 1px solid var(--line-2); animation-delay: .6s; }
.ab-type { padding: 8px 12px; display: grid; gap: 2px; animation: abPop 7s var(--spring) infinite backwards; animation-delay: .8s; }
.ab-type b { font: 500 22px/1 var(--sans); letter-spacing: -.03em; }
@keyframes abPop { 0% { opacity: 0; transform: scale(.6); } 10%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: scale(.9); } }
/* cena de anúncio: barras de resultado sobem e o selo de exemplo aparece */
.a-ads { display: grid; place-items: center; background: var(--haze); }
.aa2 { width: min(280px, 86%); padding: 12px; display: grid; gap: 10px; }
.aa2-top { display: flex; justify-content: space-between; align-items: center; }
.aa2-top b { font-weight: 500; font-size: 14px; }
.aa2-bars { height: 92px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 6px; border-bottom: 1px solid var(--line-2); }
.aa2-bars i { display: block; height: calc(var(--h) * 1%); border-radius: 4px 4px 1px 1px; background: var(--bg-2); transform-origin: 50% 100%; animation: pcBar 7s cubic-bezier(.16, 1, .3, 1) infinite backwards; animation-delay: calc(var(--d) * 80ms); }
.aa2-bars i:nth-child(n+6) { background: var(--blue); }
@media (prefers-reduced-motion: reduce) { .ab-mark, .ab-sw i, .ab-type, .aa2-bars i { animation: none !important; } }
.hacc-vis .ad-ph { height: 176px; margin-top: 0; border-bottom: 6px solid var(--ink); border-radius: 24px; } .hacc-vis .a-app, .hacc-vis .a-drv { align-content: center; }
/* linhas de serviço com a cena vinda de um parcial (home BR, 23/10): a cena ocupa a coluna da direita inteira */
.svc-v > .ani { height: 100%; min-height: 300px; border-radius: 18px; }
.svc-v .a-app, .svc-v .a-drv { align-content: center; }
.svc-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.stat b { white-space: nowrap; } .stat.long b { font-size: clamp(40px, 5vw, 76px); } /* "115 mil+" (BR) cabe na coluna sem quebrar */
/* "Mais projetos" do /cases BR (23/10): moldura com a página inteira rolando devagar, 3 colunas */
.mp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.mp { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; }
.mp .frame { border-radius: 14px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .7), var(--sh-1); margin-bottom: 8px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.mp .frame-bar { height: 26px; }
.mp .frame-shot { aspect-ratio: 4 / 3; }
.mp .frame-shot.scroll > img { animation-duration: 24s; animation-delay: calc(var(--d, 0) * -6s); }
.mp:hover .frame { transform: translateY(-4px); box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), var(--sh-2); }
.mp .k { font: 500 11px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 960px) { .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mp-grid { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================================================
   v2.9 · 23/10/2026 · M5, página de app (Lunera): topo com o celular cortado e balões, passos com o celular fixo
   que troca de tela (passo no meio da tela = tela no celular, v2.js [data-m5]), telas de app montadas em HTML com
   dado de exemplo (.ds) e cenas do app do entregador (aviso, lista, foto do carro, assinatura, mapa ao vivo).
   ====================================================================================================== */
.m5-stage { position: relative; width: min(1040px, 100%); height: clamp(360px, 38vw, 500px); margin: clamp(36px, 5vw, 60px) auto 0; }
.m5-stage .iph-hold { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
.m5-stage .iph { position: absolute; left: 50%; top: 0; width: clamp(230px, 24vw, 310px); translate: -50% 0; }
.fchip.p1 { left: 6%; top: 16%; } .fchip.p2 { right: 5%; top: 10%; } .fchip.p3 { left: 12%; top: 58%; } .fchip.p4 { right: 10%; top: 54%; }
@media (max-width: 810px) { .m5-stage { height: 420px; } .m5-stage .fchip { display: none; } .m5-stage .iph { width: 230px; } }
/* telas de app em HTML (escala pela largura da tela: cqw do .iph-view) */
.scrn { position: absolute; inset: 0; opacity: 0; translate: 0 12px; transition: opacity .45s ease, translate .5s var(--ease); }
.scrn.on, .m5-mini .scrn, .m5-stage .scrn { opacity: 1; translate: none; }
.scrn > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ds { height: 100%; padding: 4cqw 5cqw 5cqw; display: flex; flex-direction: column; gap: 3cqw; background: #F1F2E4; color: var(--ink); font-size: 3.7cqw; line-height: 1.3; }
.ds .ds-k { font: 500 3cqw/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #6E7066; }
.ds .ds-pill { align-self: flex-start; padding: 1.6cqw 3.4cqw; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 500; font-size: 3.4cqw; }
.ds .ds-big { font: 600 13cqw/1 var(--sans); letter-spacing: -.04em; }
.ds .ds-chip { align-self: flex-start; padding: 1.2cqw 2.6cqw; border-radius: 2cqw; background: #E2E3D3; font-size: 3.3cqw; }
.ds .ds-map { position: relative; height: 34cqw; border-radius: 3cqw; overflow: hidden; background: #E4E2D2; }
.ds .ds-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ds-map .rd { fill: none; stroke: #F4F3EA; stroke-width: 7; }
.ds-map .rt { fill: none; stroke: #6B4A2E; stroke-width: 3; stroke-linecap: round; }
.ds-map .rt.live { stroke: var(--blue); stroke-dasharray: 6 5; animation: dsDash 1.6s linear infinite; }
@keyframes dsDash { to { stroke-dashoffset: -22; } }
.ds-map .pt { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.ds-map .me { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.ds .ds-line { display: grid; gap: .6cqw; padding-left: 4cqw; border-left: 0; }
.ds .ds-line b { font-weight: 500; }
.ds .ds-row { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; padding: 3.2cqw; border-radius: 3cqw; background: #fff; }
.ds .ds-row span { color: #6E7066; font-size: 3.2cqw; }
.ds .ds-row .now { padding: 1cqw 2.4cqw; border-radius: 99px; background: var(--blue); color: #fff; font-size: 3cqw; }
.ds .ds-btn { margin-top: auto; padding: 4.2cqw; border-radius: 3cqw; background: var(--ink); color: #fff; text-align: center; font-weight: 500; }
.ds .ds-eta { display: flex; justify-content: space-between; align-items: center; padding: 3.4cqw; border-radius: 3cqw; background: #fff; }
.ds .ds-eta b { font: 600 6cqw/1 var(--sans); letter-spacing: -.03em; }
.ds .ds-live { display: inline-flex; align-items: center; gap: 2cqw; font-size: 3.2cqw; color: #6E7066; }
.ds .ds-live::before { content: ""; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--blue); animation: ping 2s ease-in-out infinite; }
/* passos com o celular fixo */
.m5 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.m5-phone { position: sticky; top: 104px; display: grid; place-items: center; padding: clamp(24px, 3vw, 40px) 0; border-radius: 26px; background: var(--haze); }
.m5-phone .iph { width: min(290px, 66%); }
.m5-steps { display: grid; gap: 16vh; padding-block: 8vh 20vh; }
.m5-step { display: grid; gap: 12px; padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: #fff; border: 1px solid var(--line); opacity: .42; transition: opacity .4s ease, box-shadow .4s ease; }
.m5-step.on { opacity: 1; box-shadow: var(--sh-2); }
.m5-step .n { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--ink); color: #fff; font: 500 12px/1 var(--mono); }
.m5-step .h3 { font-size: clamp(22px, 2.2vw, 28px); }
.m5-step p { color: var(--muted); }
.m5-mini { display: none; }
@media (max-width: 900px) {
  .m5 { grid-template-columns: minmax(0, 1fr); }
  .m5-phone { display: none; }
  .m5-steps { gap: 14px; padding: 0; }
  .m5-step { opacity: 1; }
  .m5-mini { display: grid; place-items: center; margin-top: 8px; padding: 20px 0; border-radius: 18px; background: var(--haze); }
  .m5-mini .iph { width: 210px; }
}
/* cenas do app do entregador (cards de "o que entra") */
.a-push, .a-list, .a-photo, .a-sign { display: grid; place-items: center; background: var(--haze); }
.ap2 { position: relative; width: min(230px, 80%); height: 150px; border-radius: 18px; background: linear-gradient(160deg, #2B2F3A, #13151B); color: #fff; display: grid; justify-items: center; align-content: start; padding-top: 18px; overflow: hidden; }
.ap2 b { font: 300 34px/1 var(--sans); letter-spacing: -.03em; }
.ap2 > span { font-size: 11px; opacity: .7; }
.ap2-n { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--ink); animation: apN 6s var(--ease) infinite backwards; }
.ap2-n i { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--blue); }
.ap2-n b { display: block; font: 500 11.5px/1.2 var(--sans); letter-spacing: 0; }
.ap2-n span { display: block; font-size: 10.5px; color: var(--muted); }
@keyframes apN { 0%, 8% { opacity: 0; transform: translateY(-60px); } 16%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-8px); } }
.al2 { width: min(250px, 84%); display: grid; gap: 6px; }
.al2 .row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; animation: alIn 7s var(--ease) infinite backwards; }
.al2 .row:nth-child(2) { animation-delay: .3s; } .al2 .row:nth-child(3) { animation-delay: .6s; }
.al2 .row .k { font: 500 11px/1 var(--mono); color: var(--muted); }
.al2 .row .pill { margin-left: auto; }
@keyframes alIn { 0%, 6% { opacity: 0; transform: translateX(-14px); } 14%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.aph { position: relative; width: min(220px, 78%); aspect-ratio: 4 / 3; border-radius: 14px; background: #D9D6C8; overflow: hidden; }
.aph::before { content: ""; position: absolute; inset: 10px; border-radius: 6px; background:
  linear-gradient(var(--ink), var(--ink)) left top / 16px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) left top / 2px 16px no-repeat,
  linear-gradient(var(--ink), var(--ink)) right top / 16px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) right top / 2px 16px no-repeat,
  linear-gradient(var(--ink), var(--ink)) left bottom / 16px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) left bottom / 2px 16px no-repeat,
  linear-gradient(var(--ink), var(--ink)) right bottom / 16px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) right bottom / 2px 16px no-repeat; }
.aph i { position: absolute; bottom: 22%; border-radius: 4px; background: #B9A57E; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08); }
.aph i:nth-child(1) { left: 16%; width: 30%; height: 34%; } .aph i:nth-child(2) { left: 48%; width: 22%; height: 26%; background: #C9B58C; } .aph i:nth-child(3) { left: 72%; width: 14%; height: 44%; background: #A99470; }
.aph::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; animation: adFlash 6s linear infinite backwards; }
.aph .ok { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; z-index: 2; animation: adPhoto 6s ease infinite backwards; }
.asg { width: min(250px, 84%); padding: 12px; display: grid; gap: 8px; }
.asg svg { width: 100%; height: 70px; }
.asg path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: asgDraw 6s ease-in-out infinite backwards; }
@keyframes asgDraw { 0%, 6% { stroke-dashoffset: 100; } 46%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.asg .line { height: 1px; background: var(--line-2); }
.asg .pill { justify-self: start; animation: adPhoto 6s ease infinite backwards; animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .ap2-n, .al2 .row, .aph::after, .aph .ok, .asg path, .asg .pill, .ds-map .rt.live, .ds .ds-live::before { animation: none !important; } }
/* "outras partes do sistema" (páginas de serviço v2) */
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rel { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.rel:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.rel .k { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rel b { font-weight: 500; font-size: 19px; letter-spacing: -.015em; }
.rel span:last-child { font-size: 14.5px; color: var(--muted); }
@media (max-width: 810px) { .rel-grid { grid-template-columns: minmax(0, 1fr); } }
.top-mist .hero-note { color: var(--muted); }
.scrn.raw > img { height: calc(100% + 10cqw); margin-top: -10cqw; } /* print real do app já traz a própria barra de status: fica escondida atrás da nossa */
.ds { text-align: left; } .ds .ds-map.tall { height: 66cqw; }
/* cenas e telas das páginas de pedido online e de apps (M5, 23/10) */
.a-slot, .a-ticket { display: grid; place-items: center; background: var(--haze); }
.sl { width: min(240px, 84%); padding: 12px; display: grid; gap: 10px; }
.sl-tg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 99px; background: var(--bg-2); font-size: 12.5px; text-align: center; }
.sl-tg span { position: relative; z-index: 1; padding: 6px 0; transition: color .3s; }
.sl-tg i { position: absolute; z-index: 0; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 99px; background: var(--ink); animation: slTg 7s var(--ease) infinite backwards; }
.sl-tg span:first-child { color: #fff; animation: slA 7s ease infinite backwards; }
.sl-tg span:nth-child(2) { animation: slB 7s ease infinite backwards; }
@keyframes slTg { 0%, 40% { translate: 0 0; } 48%, 92% { translate: 100% 0; } 100% { translate: 0 0; } }
@keyframes slA { 0%, 40% { color: #fff; } 48%, 92% { color: var(--ink); } 100% { color: #fff; } }
@keyframes slB { 0%, 40% { color: var(--ink); } 48%, 92% { color: #fff; } 100% { color: var(--ink); } }
.sl-t { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sl-t span { padding: 7px 0; border-radius: 9px; border: 1px solid var(--line-2); text-align: center; font: 500 12px/1 var(--mono); }
.sl-t span:nth-child(3) { animation: slPick 7s ease infinite backwards; }
@keyframes slPick { 0%, 58% { background: transparent; color: var(--ink); border-color: var(--line-2); } 64%, 92% { background: var(--blue); color: #fff; border-color: var(--blue); } 100% { background: transparent; } }
.a-ticket { position: relative; }
.tk-pr { position: absolute; top: 18px; width: min(220px, 76%); height: 26px; border-radius: 8px; background: var(--ink); display: grid; place-items: center; }
.tk-pr .k { color: #c8cad0; font-size: 9.5px; }
.tk { position: absolute; top: 38px; width: min(190px, 66%); padding: 12px 12px 14px; display: grid; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 0 0 6px 6px; box-shadow: var(--sh-1); font: 500 11.5px/1.3 var(--mono); transform-origin: 50% 0; animation: tkOut 7s cubic-bezier(.16, 1, .3, 1) infinite backwards; }
.tk b { font: 500 13px/1.2 var(--sans); }
.tk-f { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line-2); color: var(--muted); }
@keyframes tkOut { 0%, 6% { clip-path: inset(0 0 100% 0); } 34%, 88% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 0 100% 0); } }
.tk-ok { position: absolute; bottom: 14px; animation: adPhoto 7s ease infinite backwards; animation-delay: .3s; }
.ds.wf { background: #fff; }
.wf-hero { height: 30cqw; border-radius: 3cqw; background: var(--bg-2); }
.wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.wf-row i, .wf-list i { display: block; height: 16cqw; border-radius: 3cqw; border: .5cqw dashed var(--line-2); }
.wf-list { display: grid; gap: 2.5cqw; }
.wf-list i { height: 9cqw; }
.wf-tab { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding-top: 3cqw; border-top: .4cqw solid var(--line); text-align: center; font-size: 3cqw; color: var(--muted); }
.ds.st { background: #fff; }
.st-top { display: flex; gap: 4cqw; align-items: center; }
.st-ico { flex: none; width: 22cqw; height: 22cqw; border-radius: 5cqw; background: linear-gradient(140deg, var(--blue), #0B2E86); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .2); }
.st-top b { display: block; font: 600 6cqw/1.1 var(--sans); }
.st-top span { display: block; font-size: 3.4cqw; color: var(--muted); }
.st-get { display: inline-block !important; margin-top: 2cqw; padding: 1.6cqw 5cqw; border-radius: 99px; background: var(--blue); color: #fff !important; font-weight: 500; }
.st-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3cqw; }
.st-shots i { display: block; aspect-ratio: 9 / 19; border-radius: 3cqw; background: linear-gradient(180deg, var(--bg-2), #fff); border: .4cqw solid var(--line); overflow: hidden; }
.st-shots img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; }
@media (prefers-reduced-motion: reduce) { .sl-tg i, .sl-tg span, .sl-t span, .tk, .tk-ok { animation: none !important; } }

/* ======================================================================================================
   v2.10 · 23/10/2026 · M6, página de painel (AlteraOS + Accrue): o painel real na moldura com as telas passando, um card
   "ao vivo" com os números do dia subindo (v2.js [data-lv], dado de exemplo rotulado) e o celular do gerente flutuando
   na frente em velocidades diferentes ao rolar (v2.js [data-par]); bento 3+2 / 2+3 com cenas; passos com a moldura fixa
   trocando de tela real (mesmo [data-m5] do M5).
   ====================================================================================================== */
.m6-stage { position: relative; width: min(1152px, 100%); margin: clamp(40px, 6vw, 72px) auto clamp(40px, 7vw, 96px); text-align: left; }
.m6-stage .frame { box-shadow: 0 0 0 8px rgba(255, 255, 255, .6), 0 50px 90px -46px rgba(0, 30, 100, .5); }
.m6-float { position: absolute; z-index: 2; }
.m6-float.l { left: -4%; top: 15%; width: clamp(270px, 27%, 312px); }
.m6-float.r { right: -3%; bottom: -9%; width: clamp(150px, 15%, 184px); }
@media (max-width: 1280px) { .m6-float.l { left: 1.5%; } .m6-float.r { right: 1.5%; } }
@media (max-width: 810px) { .m6-float.l { display: none; } .m6-float.r { width: 27%; right: 3%; bottom: -12%; } }
/* card ao vivo (Accrue "Live overview") */
.lv { margin: 0; padding: 0 6px 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-2); color: var(--ink); font-size: 12px; line-height: 1.2; text-align: left; }
.lv-h { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; }
.lv-h .k { margin-right: auto; font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lv-tag, .lv-on { padding: 4px 6px; border-radius: 6px; font: 500 9px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lv-tag { background: var(--bg-2); }
.lv-on { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); color: var(--ink); }
.lv-on i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); animation: lvBlink 1.4s ease-in-out infinite; }
@keyframes lvBlink { 50% { opacity: .25; } }
.lv-in { display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: linear-gradient(180deg, #F2F3F6, #FAFAFB); }
.lv-kpis, .lv-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.lv-kpis > div, .lv-chart, .lv-st > div { background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.lv-kpis > div { display: grid; gap: 6px; padding: 8px 7px; }
.lv-kpis .k, .lv-chart .k { font: 500 8px/1.1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lv-kpis b { font: 500 14.5px/1 var(--mono); letter-spacing: -.03em; white-space: nowrap; transition: color .5s ease; }
.lv-kpis b.up { color: var(--blue); transition: none; }
.lv-chart { padding: 8px; }
.lv-ch-h { display: flex; justify-content: space-between; align-items: center; }
.lv-now { padding: 3px 5px; border-radius: 5px; background: var(--bg-2); font: 500 8.5px/1 var(--mono); }
.lv-dots { display: flex; justify-content: space-between; height: 38px; margin: 9px 0 6px; }
.lv-dots span { display: flex; flex-direction: column-reverse; justify-content: space-between; }
.lv-dots i { width: 3px; height: 3px; border-radius: 1px; background: #E4E4E7; }
.lv-dots i.on { background: var(--ink); animation: lvWave 2.6s ease-in-out infinite; animation-delay: calc(var(--c) * 80ms); }
.lv-dots span.now i.on { background: var(--blue); }
@keyframes lvWave { 50% { opacity: .28; } }
.lv-ax { display: flex; justify-content: space-between; font: 500 8px/1 var(--mono); color: #8A8A93; }
.lv-st > div { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 6px; font-size: 9.5px; white-space: nowrap; }
.lv-st i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #16A34A; }
.lv-st i.off { background: #B6B8BF; }
.lv-st span { margin-left: auto; font: 500 7px/1 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
/* bento 3+2 / 2+3 (AlteraOS "Features") */
.built.m6b { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.built.m6b .bi { grid-column: span 2; padding: 8px 8px 18px; gap: 14px; }
.built.m6b .bi:nth-child(4n+1), .built.m6b .bi:nth-child(4n) { grid-column: span 3; }
.built.m6b .bi .ani { height: 250px; }
.built.m6b .bi > b, .built.m6b .bi > p { padding: 0 10px; }
.built.m6b .bi > b { font-size: 18px; }
@media (max-width: 900px) { .built.m6b { grid-template-columns: minmax(0, 1fr); } .built.m6b .bi, .built.m6b .bi:nth-child(4n+1), .built.m6b .bi:nth-child(4n) { grid-column: auto; } .built.m6b .bi .ani { height: 220px; } }
/* cena: escolher o entregador */
.a-assign, .a-carts, .a-map, .a-mgr { background: var(--haze); }
.a-assign { display: grid; place-items: center; }
.as2 { width: min(280px, 86%); display: grid; gap: 9px; padding: 14px; text-align: left; }
.as2-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.as2-top b { padding: 0; font: 500 13px/1.25 var(--sans); letter-spacing: 0; }
.as2-sel { position: relative; height: 34px; border-radius: 9px; border: 1px solid var(--line-2); font-size: 12.5px; }
.as2-sel > span { position: absolute; left: 11px; top: 50%; translate: 0 -50%; white-space: nowrap; }
.as2-sel .ph { color: var(--muted); animation: asPh 7s ease infinite; }
.as2-sel .pick { opacity: 0; animation: asPick 7s ease infinite; }
.as2-sel svg { position: absolute; right: 9px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; color: var(--muted); }
.as2-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 2; display: grid; gap: 2px; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); opacity: 0; animation: asList 7s ease infinite; }
.as2-list > div { display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 7px; font-size: 12px; }
.as2-list > div:first-child { animation: asHi 7s ease infinite; }
.as2-list i { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.as2-list .k { margin-left: auto; }
.as2 .as2-ok { justify-self: start; opacity: 0; animation: asOk 7s var(--ease) infinite; }
@keyframes asPh { 0%, 40% { opacity: 1; } 44%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes asPick { 0%, 40% { opacity: 0; } 44%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes asList { 0%, 12% { opacity: 0; translate: 0 -6px; } 17%, 37% { opacity: 1; translate: none; } 41%, 100% { opacity: 0; translate: 0 -4px; } }
@keyframes asHi { 0%, 24% { background: transparent; } 28%, 100% { background: var(--bg-2); } }
@keyframes asOk { 0%, 50% { opacity: 0; transform: scale(.9); } 56%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
/* cena: mapa de entregas ao vivo */
.a-map svg.am-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-map .rd { fill: none; stroke: #fff; stroke-width: 9; opacity: .85; }
.am-map .blk { fill: #E6E8EE; }
.am-map .rt { fill: none; stroke: #9AA0AC; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.am-map .rt.live { stroke: var(--blue); stroke-dasharray: 7 6; animation: dsDash 1.4s linear infinite; }
.am-map .st { fill: var(--ink); }
.am-map .dst { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.am-map .drv { fill: var(--blue); stroke: #fff; stroke-width: 3.5; }
.am-map .drv.b { fill: var(--ink); }
.am-map .drv.a { animation: amA 9s linear infinite; }
.am-map .drv.b { animation: amB 11s linear infinite; }
@keyframes amA { 0% { transform: translate(110px, 196px); } 36% { transform: translate(330px, 196px); } 62% { transform: translate(330px, 92px); } 92%, 100% { transform: translate(500px, 92px); } }
@keyframes amB { 0% { transform: translate(110px, 196px); } 40% { transform: translate(110px, 64px); } 90%, 100% { transform: translate(240px, 64px); } }
.a-map .am-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 12px; white-space: nowrap; }
.a-map .am-chip b { padding: 0; font: 500 12px/1.2 var(--sans); letter-spacing: 0; }
.a-map .am-chip.eta { right: 5%; top: 9%; }
.a-map .am-chip.need { left: 5%; bottom: 9%; animation: amNeed 5s ease-in-out infinite; }
.a-map .am-tag { position: absolute; z-index: 2; left: 5%; top: 9%; }
@keyframes amNeed { 0%, 100% { box-shadow: var(--sh-1); } 50% { box-shadow: 0 0 0 4px rgba(0, 83, 247, .16), var(--sh-1); } }
/* cena: carrinhos abandonados */
.a-carts { display: grid; place-items: center; }
.ac2 { width: min(380px, 88%); display: grid; gap: 6px; text-align: left; }
.ac2 .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; animation: alIn 8s var(--ease) infinite; }
.ac2 .row:nth-child(2) { animation-delay: .3s; } .ac2 .row:nth-child(3) { animation-delay: .6s; }
.ac2 .row b { padding: 0; font: 500 12.5px/1 var(--mono); letter-spacing: 0; }
.ac2 .row > span:not(.pill) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ac2 .pill { background: var(--bg-2); color: var(--muted); }
.ac2 .more { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; font-size: 12px; animation: acMore 8s var(--ease) infinite; }
.ac2 .more .pill { margin-left: auto; background: var(--blue); color: #fff; }
@keyframes acMore { 0%, 26% { max-height: 0; opacity: 0; margin-top: -10px; } 34%, 86% { max-height: 40px; opacity: 1; margin-top: 0; } 94%, 100% { max-height: 0; opacity: 0; margin-top: -10px; } }
/* cena: app do gerente (o print real rolando no celular) */
.a-mgr { display: grid; place-items: center; } /* celular inteiro no card: cortado embaixo foi reprovado na home (23/10) */
.a-mgr .iph { height: calc(100% - 26px); width: auto; }
/* passos com a moldura fixa (painel no computador) */
.m5.m6x { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
.m6x .m5-phone { padding: clamp(18px, 2.4vw, 32px); }
.m6x .m5-phone .frame, .m6x .m5-mini .frame { width: 100%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), var(--sh-2); }
.m6x .frame-bar { height: 30px; }
.m6x .m5-steps { gap: 12vh; }
.m6x .m5-step .h3 { font-size: clamp(20px, 1.9vw, 24px); }
@media (max-width: 900px) { .m5.m6x { grid-template-columns: minmax(0, 1fr); } .m6x .m5-mini { padding: 14px; } .m6x .frame-bar .url { display: none; }
  /* no celular a tela inteira do painel fica ilegível: recorte ampliado, sem o menu lateral */
  .m6x .m5-mini .frame-shot { aspect-ratio: 4 / 3; }
  .m6x .m5-mini .scrn > img { width: 165%; max-width: none; height: auto; translate: -15% 0; } }
@media (prefers-reduced-motion: reduce) { .lv-on i, .lv-dots i.on, .as2-sel .ph, .as2-sel .pick, .as2-list, .as2-list > div, .as2 .as2-ok, .am-map .rt.live, .am-map .drv, .a-map .am-chip.need, .ac2 .row, .ac2 .more { animation: none !important; } .as2-sel .pick, .as2 .as2-ok { opacity: 1; } .as2-sel .ph { opacity: 0; } .am-map .drv.a { transform: translate(330px, 196px); } .am-map .drv.b { transform: translate(110px, 64px); } .ac2 .more { max-height: 40px; opacity: 1; } }

/* ======================================================================================================
   v2.11 · 23/10/2026 · molde F (Fabrica para serviço de marca, design e sites): faixa de peças reais correndo no topo,
   grade de projetos com o hover do /work, linhas de serviço com colagem de fotos que flutua devagar (não só no hover),
   4 passos com pontos que acendem em escada (Fabrica "About us") e os números da marca.
   ====================================================================================================== */
.pieces { overflow: hidden; margin-top: clamp(36px, 5vw, 60px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7% 93%, transparent); }
.pieces-track { display: flex; width: max-content; animation: tick var(--tick, 80s) linear infinite; }
.pieces:hover .pieces-track { animation-play-state: paused; }
.pieces-half { display: flex; flex: none; gap: 14px; padding-right: 14px; }
.pieces figure { flex: none; margin: 0; height: clamp(220px, 25vw, 340px); }
.pieces img { display: block; width: auto; height: 100%; border-radius: 16px; border: 4px solid #fff; background: #fff; box-shadow: var(--sh-1); }
.pieces.sites figure { height: clamp(190px, 21vw, 290px); }
.collage.drift img { animation: cgDrift 9s ease-in-out infinite; }
.collage.drift .c2 { animation-delay: -3s; } .collage.drift .c3 { animation-delay: -6s; }
@keyframes cgDrift { 50% { translate: 0 -9px; } }
.svc-v .frame { height: 100%; min-height: 300px; display: flex; flex-direction: column; box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), var(--sh-1); }
.svc-v .frame .frame-shot { flex: 1; aspect-ratio: auto; }
.svc-v.phone-v { display: grid; place-items: center; min-height: 340px; border-radius: 18px; background: var(--haze); }
.svc-v.phone-v .iph { width: min(190px, 46%); }
.f4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.f4 > div { display: grid; gap: 36px; align-content: space-between; min-height: 210px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.f4-top { display: flex; justify-content: space-between; align-items: center; }
.f4-dots { display: flex; gap: 5px; }
.f4-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.f4-dots i.on { animation: f4Dot 7s ease infinite; animation-delay: calc(var(--d) * .35s); }
@keyframes f4Dot { 0%, 4% { background: var(--line-2); } 9%, 92% { background: var(--ink); } 97%, 100% { background: var(--line-2); } }
.f4 .n { font: 500 12px/1 var(--mono); color: var(--muted); }
.f4 b { display: block; font-weight: 500; font-size: 19px; letter-spacing: -.015em; }
.f4 p { margin-top: 8px; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .f4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .f4 { grid-template-columns: minmax(0, 1fr); } .f4 > div { min-height: 0; gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .pieces-track, .collage.drift img, .f4-dots i.on { animation: none !important; } .f4-dots i.on { background: var(--ink); } .pieces { overflow-x: auto; } }

/* ======================================================================================================
   v2.12 · 23/10/2026 · M8, página de marketing (Optivio): palavra que troca no título ([data-rot], letras entram com
   desfoque e inclinação), "Proof of Impact" com os cards abrindo do centro conforme a rolagem ([data-impact], --p de 0
   a 1) e o número contando, cenas de QR por peça e de mensagem para quem já comprou.
   ====================================================================================================== */
.rot, html.js .words .rot.w { display: inline-grid; justify-items: start; color: var(--blue); }
.rot > span { grid-area: 1 / 1; white-space: nowrap; }
.top-mist:has(.rot) { overflow-x: clip; } /* a palavra escondida, esticada pela animação, não pode criar rolagem lateral (23/10, no ar) */
.rot[style] { transition: width .55s var(--ease); }
@media (max-width: 480px) { html.js .words .rot.w { display: grid; justify-items: center; width: auto !important; } } /* celular: a palavra fica numa linha própria e o título não muda de altura */
.rot i { display: inline-block; font-style: normal; white-space: pre; opacity: 0; transform: translateY(.1em) scaleX(1.9) skewX(-28deg); filter: blur(10px); transition: opacity .45s ease, transform .6s var(--ease), filter .45s ease; transition-delay: calc(.12s + var(--k) * 35ms); }
.rot .on i { opacity: 1; transform: none; filter: none; }
.rot .out i { opacity: 0; transform: translateY(-.1em) scaleX(.4) skewX(28deg); filter: blur(10px); transition-delay: calc(var(--k) * 20ms); }
.impact { --p: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.impact .col { display: grid; gap: 12px; }
.ic { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-height: 250px; padding: clamp(22px, 2.2vw, 30px); border-radius: 28px; background: #fff; border: 1px solid var(--line); translate: calc((1 - var(--p)) * var(--x, 0) * 100%) calc((1 - var(--p)) * var(--y, 0) * 100%); scale: calc(.8 + .2 * var(--p)); will-change: translate, scale; }
.ic.alt { background: #EEF3FF; border-color: transparent; }
.ic-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #5A8DFF; box-shadow: 0 1px 2px rgba(14, 15, 18, .2), 0 10px 22px -8px rgba(14, 15, 18, .45); }
.ic-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.2s ease .2s; }
.impact.in .ic-ico svg, html:not(.js) .ic-ico svg { stroke-dashoffset: 0; }
.ic > div > b { display: block; font: 500 clamp(38px, 3.8vw, 54px)/1 var(--sans); letter-spacing: -.045em; }
.ic .m { margin-top: 10px; font-weight: 500; font-size: 17px; }
.ic .h { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.ic.tall { justify-content: flex-start; gap: 18px; }
.ic.tall .ph { flex: 1; min-height: 220px; border-radius: 20px; overflow: hidden; translate: 0 calc((1 - var(--p)) * 48px); scale: calc(.92 + .08 * var(--p)); }
.ic.tall .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ic.tall .cap { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .impact { grid-template-columns: minmax(0, 1fr); } .ic { translate: none !important; scale: none !important; min-height: 0; } .ic.tall .ph { translate: none; scale: none; min-height: 240px; } }
/* cena: um QR code por peça, e o número de cada peça subindo (exemplo) */
@property --sc { syntax: "<integer>"; inherits: false; initial-value: 0; }
.a-qr { display: grid; place-items: center; background: var(--haze); }
.aq-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(420px, 90%); }
.aq { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; text-align: center; }
.aq svg { width: 54px; height: 54px; }
.aq b { padding: 0; font: 500 12.5px/1.2 var(--sans); letter-spacing: 0; }
.aq .n { font: 500 22px/1 var(--mono); letter-spacing: -.03em; counter-reset: sc var(--sc); animation: aqN 7s var(--ease) infinite; }
.aq .n::before { content: counter(sc); }
.aq:nth-child(1) .n { --to: 38; } .aq:nth-child(2) .n { --to: 64; animation-delay: .25s; } .aq:nth-child(3) .n { --to: 21; animation-delay: .5s; }
.aq:nth-child(2) { box-shadow: 0 0 0 2px var(--blue), var(--sh-1); }
@keyframes aqN { 0%, 8% { --sc: 0; } 60%, 92% { --sc: var(--to); } 100% { --sc: 0; } }
.a-qr .aq-tag { position: absolute; left: 14px; top: 14px; }
/* cena: mensagem para quem já comprou (só quem aceitou receber) */
.a-msg { display: grid; place-items: center; background: var(--haze); }
.am2 { display: grid; gap: 8px; width: min(300px, 86%); }
.am2 .b1 { justify-self: start; max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 5px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.35; animation: amIn 7s var(--ease) infinite; }
.am2 .b1 u { color: var(--blue); text-decoration: none; }
.am2 .b2 { justify-self: end; padding: 9px 13px; border-radius: 16px 16px 5px 16px; background: var(--ink); color: #fff; font-size: 13px; animation: amIn 7s var(--ease) infinite; animation-delay: 1.1s; }
.am2 .pill { justify-self: end; animation: amIn 7s var(--ease) infinite; animation-delay: 2s; }
.am2 .k { justify-self: start; margin-top: 4px; }
@keyframes amIn { 0%, 6% { opacity: 0; transform: translateY(8px); } 12%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rot i { transition: none; } .aq .n, .am2 .b1, .am2 .b2, .am2 .pill { animation: none !important; } .aq .n { --sc: var(--to); } }

/* ======================================================================================================
   v2.13 · 23/10/2026 · M7, página de IA (SpartanAI + Accrue): console de agente com a pergunta sendo digitada, a resposta,
   a ação esperando aprovação e o recibo das fontes (caminho, hash, revisão), tudo rotulado como exemplo; card do agente
   flutuando; bento de prova; cenas de agentes, busca com fonte e aprovação em duas raias.
   ====================================================================================================== */
.m7-stage { position: relative; width: min(940px, 100%); margin: clamp(40px, 6vw, 72px) auto clamp(30px, 5vw, 64px); text-align: left; }
.cons { margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .6), 0 50px 90px -46px rgba(0, 30, 100, .45); }
.cons-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #F7F8FA; }
.cons-bar .k { margin-right: auto; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cons-body { display: grid; gap: 16px; padding: clamp(18px, 2.6vw, 30px); font-size: 15.5px; line-height: 1.45; }
.cons .who { display: block; margin-bottom: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cons .q p { display: inline-block; clip-path: inset(0 100% 0 0); animation: cnType 11s steps(42) infinite; }
.cons .a, .cons .rc li { opacity: 0; animation: cnIn 11s var(--ease) infinite; }
.cons .a b { font-weight: 500; }
.cons .act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cn-pill { padding: 7px 11px; border-radius: 99px; background: var(--bg-2); font: 500 11.5px/1 var(--mono); }
.cn-ok { position: relative; overflow: hidden; padding: 8px 14px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; }
.cn-ok::after { content: attr(data-done); position: absolute; inset: 0; display: grid; place-items: center; background: var(--blue); opacity: 0; animation: cnOk 11s ease infinite; }
.cons .rc { padding: 12px 14px; border-radius: 12px; background: #F4F5F7; }
.cons .rc ul { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.cons .rc li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; font: 500 12px/1.25 var(--mono); animation-delay: calc(.9s + var(--i) * .3s); }
.cons .rc li code { overflow: hidden; font: inherit; white-space: nowrap; text-overflow: ellipsis; }
.cons .rc li span { color: var(--muted); }
@keyframes cnType { 0%, 3% { clip-path: inset(0 100% 0 0); } 20%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes cnIn { 0%, 23% { opacity: 0; transform: translateY(8px); } 28%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cnOk { 0%, 58% { opacity: 0; } 62%, 94% { opacity: 1; } 100% { opacity: 0; } }
.m7-float { position: absolute; z-index: 2; right: -7%; bottom: -12%; width: clamp(220px, 27%, 258px); } /* no canto de baixo: o selo "Sample data" do console fica à vista */
@media (max-width: 1180px) { .m7-float { right: 1%; } }
@media (max-width: 810px) { .m7-float { display: none; } .cons .rc li { grid-template-columns: minmax(0, 1fr) auto; } .cons .rc li span:last-child { display: none; } }
.agc { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); font-size: 13px; }
.agc-top { display: flex; align-items: center; gap: 10px; }
.agc-mono { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: #fff; font: 500 12.5px/1 var(--mono); }
.agc-top b { display: block; font-weight: 500; }
.agc-top div > span { font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--blue); }
.agc dl { display: grid; gap: 7px; margin: 0; }
.agc dl div { display: flex; justify-content: space-between; gap: 10px; }
.agc dt { color: var(--muted); } .agc dd { margin: 0; font: 500 12px/1.3 var(--mono); }
.agc .lv-tag { justify-self: start; }
/* bento de prova */
.aib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aib > div { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 250px; padding: clamp(22px, 2.2vw, 28px); border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.aib .w2 { grid-column: span 2; }
.aib .dark { background: var(--ink); color: #fff; border-color: transparent; }
.aib .dark p { color: rgba(255, 255, 255, .68); }
.aib .big { display: block; font: 500 clamp(44px, 4.4vw, 64px)/1 var(--sans); letter-spacing: -.045em; }
.aib h3 { font-size: 20px; font-weight: 500; letter-spacing: -.015em; }
.aib p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.aib svg.pulse { width: 100%; height: 56px; }
.aib svg.pulse path { fill: none; stroke: #5A8DFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60 240; animation: aibPulse 3.2s linear infinite; }
.aib svg.pulse path.base { stroke: rgba(255, 255, 255, .16); stroke-dasharray: none; animation: none; }
@keyframes aibPulse { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.aib .tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.aib .tile { display: grid; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; line-height: 1.25; }
.aib .tile .agc-mono { width: 30px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.aib .tile i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #16A34A; animation: lvBlink 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
.aib .rcpt { display: grid; gap: 6px; }
.aib .rcpt div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 8px 10px; border-radius: 9px; background: var(--bg); font: 500 12px/1.2 var(--mono); }
.aib .rcpt span { color: var(--muted); }
.aib .appr { position: relative; align-self: start; padding: 9px 15px; border-radius: 99px; background: var(--bg-2); font-size: 13px; font-weight: 500; overflow: hidden; }
.aib .appr::after { content: attr(data-done); position: absolute; inset: 0; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: 0; animation: cnOk 6s ease infinite; }
@media (max-width: 900px) { .aib { grid-template-columns: minmax(0, 1fr); } .aib .w2 { grid-column: auto; } .aib .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aib > div { min-height: 0; } }
/* cenas: agentes, busca com fonte, aprovação em duas raias */
.a-agents, .a-rag, .a-lanes { display: grid; place-items: center; background: var(--haze); }
.ag2 { display: grid; gap: 7px; width: min(360px, 90%); }
.ag2 .row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; text-align: left; }
.ag2 .row .agc-mono { width: 30px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.ag2 .row b { display: block; font-weight: 500; }
.ag2 .st { display: grid; justify-items: end; }
.ag2 .st i { grid-area: 1 / 1; padding: 4px 8px; border-radius: 99px; font: 500 10px/1 var(--mono); font-style: normal; white-space: nowrap; background: var(--bg-2); color: var(--muted); }
.ag2 .st i.s2 { background: var(--ink); color: #fff; opacity: 0; animation: agSw 8s ease infinite; animation-delay: calc(var(--i) * .9s); }
.ag2 .st i.s1 { animation: agSw1 8s ease infinite; animation-delay: calc(var(--i) * .9s); }
@keyframes agSw { 0%, 30% { opacity: 0; } 36%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes agSw1 { 0%, 30% { opacity: 1; } 36%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
.tm { display: grid; gap: 7px; width: min(400px, 92%); padding: 14px; text-align: left; font: 500 12px/1.3 var(--mono); }
.tm-l { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tm-l.q { display: block; clip-path: inset(0 100% 0 0); animation: cnType 8s steps(36) infinite; }
.tm-l.s { padding: 7px 9px; border-radius: 8px; background: var(--bg); opacity: 0; animation: tmIn 8s var(--ease) infinite; animation-delay: calc(1.8s + var(--i) * .35s); }
.tm-l.s code { overflow: hidden; font: inherit; white-space: nowrap; text-overflow: ellipsis; }
.tm-l.s span, .tm-l.r .k { color: var(--muted); }
.tm-l.r { justify-content: start; grid-template-columns: auto minmax(0, 1fr); opacity: 0; animation: tmIn 8s var(--ease) infinite; animation-delay: 3.1s; }
@keyframes tmIn { 0% { opacity: 0; transform: translateY(6px); } 6%, 72% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }
.ln2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; width: min(460px, 94%); text-align: left; }
.ln2 .lane { display: grid; gap: 8px; align-content: start; min-height: 128px; padding: 12px; font-size: 12.5px; line-height: 1.35; }
.ln2 .lane p { margin: 0; }
.ln2 .lane .l { opacity: 0; animation: tmIn 8s var(--ease) infinite; animation-delay: calc(3.4s + var(--i) * .45s); }
.ln2 .lane .l::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #16A34A; vertical-align: middle; }
.ln2 .okb { position: relative; overflow: hidden; padding: 8px 12px; border-radius: 99px; background: var(--bg-2); font-size: 12px; font-weight: 500; }
.ln2 .okb::after { content: attr(data-done); position: absolute; inset: 0; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: 0; animation: lnOk 8s ease infinite; }
@keyframes lnOk { 0%, 32% { opacity: 0; } 38%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) { .ln2 { grid-template-columns: minmax(0, 1fr); } .ln2 .okb { justify-self: center; } .ln2 .lane { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .cons .q p, .tm-l.q { clip-path: none; animation: none; } .cons .a, .cons .rc li, .tm-l.s, .tm-l.r, .ln2 .lane .l { opacity: 1; animation: none; } .cn-ok::after, .aib .appr::after, .ln2 .okb::after, .aib svg.pulse path, .aib .tile i, .ag2 .st i { animation: none; } }

/* ======================================================================================================
   v2.14 · 23/10/2026 · índice de serviços (madebykota): um serviço por tela, a mídia presa de um lado trocando quando o
   serviço passa do meio da tela (mesmo [data-m5]); topo "Services." com contador, igual ao /work.
   ====================================================================================================== */
.m5.m5s { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.m5s .m5-phone { padding: 0; background: none; top: 96px; }
.sv-media { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - 130px); overflow: hidden; border-radius: 32px; background: var(--haze); border: 1px solid var(--line); }
.sv-media .scrn { display: grid; place-items: center; padding: 7%; }
.sv-media .scrn > .ani { position: absolute; inset: 0; height: auto; border-radius: 0; }
.sv-media .iph { width: min(250px, 50%); }
.sv-media .frame { width: 100%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), var(--sh-2); }
.sv-media .frame-bar { height: 30px; }
.sv-media .piece { position: absolute; inset: 0; }
.sv-media .piece img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m5s .m5-steps { gap: 28vh; padding-block: 14vh 30vh; }
.m5s .m5-step { gap: 16px; }
.m5s .m5-step .h3 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.03em; }
.sv-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.sv-meta dt { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sv-meta dd { margin: 7px 0 0; font-weight: 500; }
.m5s .m5-step .btn { justify-self: start; }
@media (max-width: 900px) { .m5.m5s { grid-template-columns: minmax(0, 1fr); } .m5s .m5-mini { padding: 0; background: none; } .m5s .m5-mini .sv-media { aspect-ratio: 4 / 3.4; max-height: none; } .m5s .m5-mini .iph { width: 150px; } }
.sv-media .iph-view img.sv-raw { margin-top: -10cqw; } /* print real do app traz a própria barra de status */

/* ======================================================================================================
   v2.15 · 23/10/2026 · iPhone realista (pedido do Rodrigo: "padrão realista de iPhone, encaixando melhor os prints").
   O mesmo .iph de antes, com moldura de titânio com brilho na borda (::after, anel por mask), botões laterais
   (::before: ação e volume à esquerda, power à direita), barra de status com sinal e Wi-Fi e um reflexo leve no vidro.
   Geometria do iPhone 15 Pro: tela a 3,4% da lateral e 1,65% do topo. Print com barra de status própria: img.raw.
   ====================================================================================================== */
.iph { background: #050506; box-shadow: 0 0 0 1px rgba(14, 15, 18, .06), 0 40px 70px -34px rgba(0, 30, 100, .5), 0 14px 26px -16px rgba(14, 15, 18, .42); }
.iph::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1.25%;
  background: linear-gradient(135deg, #b4b6bb 0%, #5c5e63 8%, #2b2c30 22%, #1b1c1f 50%, #2d2e32 76%, #626469 91%, #b9bbc0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.iph::before { content: ""; position: absolute; top: 17%; bottom: 53%; left: -.95%; right: -.95%; pointer-events: none;
  background: linear-gradient(90deg, #6e7075, #34353a) left 0 top 0 / 1.1% 11% no-repeat, linear-gradient(90deg, #6e7075, #34353a) left 0 top 38.6% / 1.1% 30% no-repeat,
    linear-gradient(90deg, #6e7075, #34353a) left 0 top 94.3% / 1.1% 30% no-repeat, linear-gradient(270deg, #6e7075, #34353a) right 0 top 54.5% / 1.1% 45% no-repeat; }
.iph-scr::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 24%, rgba(255, 255, 255, 0) 38%); }
.iph-sb i::before { content: ""; position: absolute; top: 50%; right: calc(100% + 1.5cqw); width: 13.5cqw; height: 3.7cqw; translate: 0 -50%; background: currentColor; opacity: .92;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.6' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9.2' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.8' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29.5 11.6 27.3 9.2a3.2 3.2 0 0 1 4.4 0z'/%3E%3Cpath d='M24.6 6.9a7 7 0 0 1 9.8 0l-1.6 1.8a4.6 4.6 0 0 0-6.6 0z'/%3E%3Cpath d='M21.9 4a11 11 0 0 1 15.2 0l-1.6 1.8a8.6 8.6 0 0 0-12 0z'/%3E%3C/svg%3E") right center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.6' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9.2' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.8' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M29.5 11.6 27.3 9.2a3.2 3.2 0 0 1 4.4 0z'/%3E%3Cpath d='M24.6 6.9a7 7 0 0 1 9.8 0l-1.6 1.8a4.6 4.6 0 0 0-6.6 0z'/%3E%3Cpath d='M21.9 4a11 11 0 0 1 15.2 0l-1.6 1.8a8.6 8.6 0 0 0-12 0z'/%3E%3C/svg%3E") right center / contain no-repeat; }
.iph-view > img.raw { margin-top: -10.5cqw; }
.phones .iph { flex: none; width: min(230px, 40%); }
.phones .iph:nth-child(2) { margin-bottom: 28px; }
.scard-vis .iph { width: min(200px, 42%); }
@media (max-width: 810px) { .sys-m .iph { width: min(190px, 46%); } .phones .iph:nth-child(2) { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .iph-scr::after { display: none; } }

/* ======================================================================================================
   v2.16 · 23/10/2026 · páginas institucionais (Fabrica /studio, FAQ, contato, 404): topo "About." igual ao /work,
   canais de contato em cards, perguntas com a coluna da esquerda presa, clientes em tiles com a logo na cor da marca.
   ====================================================================================================== */
.faq.sticky > div:first-child { position: sticky; top: 108px; align-self: start; }
@media (max-width: 900px) { .faq.sticky > div:first-child { position: static; } }
.ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ch { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 30px); border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.ch.main { background: var(--ink); color: #fff; border-color: transparent; }
.ch.main p { color: rgba(255, 255, 255, .72); }
.ch .k { font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ch.main .k { color: rgba(255, 255, 255, .6); }
.ch b { font-weight: 500; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ch p { color: var(--muted); font-size: 15px; }
.ch .btn, .ch .link { justify-self: start; margin-top: 8px; }
.ch.main .btn { background: #fff; color: var(--ink); }
@media (max-width: 900px) { .ch-grid { grid-template-columns: minmax(0, 1fr); } }
.cl-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }
.cl { display: grid; grid-template-rows: 1fr auto; gap: 14px; justify-items: center; align-items: center; min-height: 150px; padding: 22px 18px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-align: center; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cl:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.cl img { display: block; width: auto; max-width: 70%; height: 40px; object-fit: contain; }
.cl span { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl { min-height: 120px; } .cl img { height: 30px; } }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* cena: Robusta Coins (avaliação acende, coins entram, desconto no carrinho) */
.a-coins { display: grid; place-items: center; background: var(--haze); }
.co2 { display: grid; gap: 8px; justify-items: start; width: min(280px, 86%); text-align: left; }
.co2 .box { display: grid; gap: 7px; width: 100%; padding: 12px 14px; }
.co2 b { padding: 0; font: 500 13px/1.2 var(--sans); letter-spacing: 0; }
.co-stars { display: flex; gap: 4px; }
.co-stars svg { width: 16px; height: 16px; color: var(--line-2); animation: pgStar 7s var(--spring) infinite backwards; }
.co-stars svg:nth-child(2) { animation-delay: .15s; } .co-stars svg:nth-child(3) { animation-delay: .3s; } .co-stars svg:nth-child(4) { animation-delay: .45s; } .co-stars svg:nth-child(5) { animation-delay: .6s; }
.co2 .co-plus { justify-self: center; opacity: 0; animation: asOk 7s var(--ease) infinite; animation-delay: .9s; }
.co2 .co-cart { opacity: 0; animation: amIn 7s var(--ease) infinite; animation-delay: 1.6s; }
.co2 .co-cart .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .co-stars svg, .co2 .co-plus, .co2 .co-cart { animation: none !important; opacity: 1; color: var(--ink); } }
/* cenas de loja: frete grátis se completando (Robusta) e área do cliente com o pedido andando (Mileto) */
.a-ship, .a-acct { display: grid; place-items: center; background: var(--haze); }
.sh2, .ac3 { display: grid; gap: 9px; width: min(280px, 86%); padding: 14px; text-align: left; }
.sh2 b, .ac3 b { padding: 0; font: 500 13px/1.25 var(--sans); letter-spacing: 0; }
.sh-bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.sh-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); animation: shFill 7s var(--ease) infinite; }
@keyframes shFill { 0%, 8% { width: 35%; } 45%, 90% { width: 100%; } 100% { width: 35%; } }
.sh2 .sh-ok { justify-self: start; opacity: 0; animation: asOk 7s var(--ease) infinite; animation-delay: 2.4s; }
.ac-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ac-steps span { padding: 6px 4px; border-radius: 8px; background: var(--bg-2); color: var(--muted); font: 500 10px/1.2 var(--mono); text-align: center; animation: acStep 7s ease infinite; }
.ac-steps span:nth-child(2) { animation-delay: 1.2s; } .ac-steps span:nth-child(3) { animation-delay: 2.4s; }
@keyframes acStep { 0%, 6% { background: var(--bg-2); color: var(--muted); } 12%, 90% { background: var(--ink); color: #fff; } 96%, 100% { background: var(--bg-2); color: var(--muted); } }
@media (prefers-reduced-motion: reduce) { .sh-bar i, .sh2 .sh-ok, .ac-steps span { animation: none !important; } .sh-bar i { width: 100%; } .sh2 .sh-ok { opacity: 1; } }

/* ======================================================================================================
   v2.17 · 23/10/2026 · páginas legais (privacidade e termos) no visual claro: documento numa coluna de leitura.
   ====================================================================================================== */
.legal-page { padding: clamp(120px, 13vw, 168px) 0 clamp(64px, 8vw, 110px); background: linear-gradient(180deg, #E9EEF8 0, var(--bg) 360px); }
.legal-doc { max-width: 760px; margin: 0 auto; }
.legal-doc h1 { font-size: clamp(38px, 5vw, 56px); font-weight: 500; letter-spacing: -.04em; line-height: 1.04; }
.legal-doc h2 { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); font-size: clamp(21px, 2vw, 25px); font-weight: 500; letter-spacing: -.02em; }
.legal-doc h3 { margin-top: 28px; font-size: 18px; font-weight: 500; }
.legal-doc p, .legal-doc li { font-size: 16px; line-height: 1.7; color: var(--muted); }
.legal-doc p { margin-top: 14px; }
.legal-doc ul, .legal-doc ol { margin: 14px 0 0; padding-left: 22px; }
.legal-doc ul { list-style: disc; } .legal-doc ol { list-style: decimal; }
.legal-doc li + li { margin-top: 6px; }
.legal-doc strong { color: var(--ink); font-weight: 500; }
.legal-doc a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0, 83, 247, .35); }
.legal-doc hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); }
.legal-doc code { font-family: var(--mono); font-size: .9em; }
.legal-table { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal-table th, .legal-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--muted); }
.legal-table th { color: var(--ink); font-weight: 500; background: var(--bg); }
.legal-table tr:last-child td { border-bottom: 0; }