/* Landing pública: identidade e cores derivadas dos tokens do Produzi. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--pz-bg); color: var(--ink-900); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; }
button, a, select, summary { touch-action: manipulation; }
button, a { color: inherit; }
a { text-decoration: none; }
button { cursor: pointer; }
button svg, a svg { flex-shrink: 0; }
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 5px; }
::selection { background: var(--brand-500); color: var(--on-brand); }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.container { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 20px; background: var(--brand-500); color: var(--on-brand); padding: 14px 22px; z-index: 100; border-radius: var(--r-sm); }
.skip-link:focus { top: 14px; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--pz-border); background: color-mix(in oklch, var(--pz-bg) 92%, transparent); backdrop-filter: blur(18px); }
.nav-row { height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-header .marca-simbolo, .site-footer .marca-simbolo { color: var(--brand-500); }
.desktop-nav { display: flex; align-items: center; gap: 32px; font-size: 12px; color: var(--ink-500); }
.desktop-nav a, .site-footer nav a { transition: color var(--motion-fast); }
.desktop-nav a:hover, .site-footer nav a:hover { color: var(--brand-500); }
.nav-actions { display: flex; align-items: center; gap: 28px; }
.language-switch { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.language-switch a { padding-block: 12px; color: var(--ink-500); }
.language-switch a[aria-current] { color: var(--brand-500); }
.language-switch > span { color: var(--ink-300); }
.language-switch > svg { margin-right: 3px; color: var(--ink-500); }
.nav-login { display: flex; align-items: center; gap: 20px; padding: 12px 18px; border: 1px solid var(--pz-border-strong); border-radius: var(--r-sm); font-size: 12px; transition: background var(--motion-fast); }
.nav-login:hover { background: var(--overlay-hover); }
.menu-toggle { display: none; padding: 8px; border: 1px solid var(--pz-border-strong); background: transparent; border-radius: var(--r-sm); }
.mobile-nav { padding-block: 12px 24px; }
.mobile-nav a { padding: 14px 0; font-size: 14px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--pz-border); }
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 79px; }
.hero-grid { position: absolute; z-index: -1; top: 0; height: 740px; inset-inline: 0; opacity: .3; background-image: linear-gradient(var(--pz-border) 1px, transparent 1px), linear-gradient(90deg, var(--pz-border) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, transparent 25%, black 80%); }
.hero-orbit { position: absolute; z-index: -1; width: 450px; height: 450px; border: 1px solid color-mix(in oklch, var(--brand-500) 12%, transparent); border-radius: 50%; pointer-events: none; }
.orbit-one { top: 65px; left: -310px; box-shadow: 0 0 0 44px color-mix(in oklch, var(--brand-500) 2%, transparent), 0 0 0 100px color-mix(in oklch, var(--brand-500) 1.5%, transparent); }
.orbit-two { top: 110px; right: -335px; box-shadow: 0 0 0 50px color-mix(in oklch, var(--brand-500) 2%, transparent), 0 0 0 105px color-mix(in oklch, var(--brand-500) 1.5%, transparent); }
.hero-content { text-align: center; position: relative; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .17em; line-height: 1.6; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--pz-border-strong); padding: 7px 12px; border-radius: 100px; color: var(--ink-700); background: var(--surface-muted); }
.status-dot { display: inline-block; width: 5px; height: 5px; background: var(--brand-500); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 9px color-mix(in oklch, var(--brand-500) 24%, transparent); }
h1 { margin-top: 27px; font-size: clamp(46px, 5.65vw, 78px); font-weight: 500; line-height: 1.1; letter-spacing: -.065em; }
.hero-highlight { color: var(--brand-500); position: relative; display: inline-block; }
.hero-highlight > svg { position: absolute; width: 100%; height: 12px; bottom: -9px; left: 0; fill: none; stroke: var(--brand-500); stroke-width: 1.7; opacity: .7; }
.hero-intro { max-width: 565px; margin: 30px auto 0; font-size: 15px; color: var(--ink-500); line-height: 1.8; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 49px; padding: 14px 23px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; transition: transform var(--motion-base), background var(--motion-base), box-shadow var(--motion-base); }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--brand-500); color: var(--on-brand); box-shadow: 0 4px 24px color-mix(in oklch, var(--brand-500) 10%, transparent); }
.button-primary:hover { background: var(--brand-400); box-shadow: var(--glow-brand); }
.button-text { gap: 10px; color: var(--ink-700); }
.button-text:hover { background: var(--overlay-hover); }
.hero-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; color: var(--ink-500); font-size: 10px; }
.hero-note svg { color: var(--brand-500); }
.demo-stage { margin-top: 62px; position: relative; width: min(1060px, calc(100% - 100px)); scroll-margin-top: 112px; }
.demo-stage::before { content: ''; position: absolute; z-index: -1; inset: 10% -10%; background: radial-gradient(ellipse, color-mix(in oklch, var(--brand-500) 9%, transparent), transparent 68%); filter: blur(30px); }
.demo-caption { display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: .13em; margin-bottom: 12px; color: var(--ink-500); }
.demo-caption > span { display: flex; gap: 8px; align-items: center; }
.demo-caption > span:last-child { color: var(--brand-500); }
.dashboard-shell { display: grid; grid-template-columns: 185px minmax(0, 1fr); min-height: 489px; background: var(--pz-bg); border: 1px solid var(--pz-border-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 35px 100px var(--overlay-scrim), 0 0 0 6px color-mix(in oklch, var(--ink-900) 2%, transparent); }
.demo-sidebar { padding: 26px 16px; border-right: 1px solid var(--pz-border); display: flex; flex-direction: column; background: var(--surface-muted); }
.demo-brand { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 15px; letter-spacing: -.045em; }
.demo-brand > svg, .brand-period { color: var(--brand-500); }
.workspace-avatar { display: flex; gap: 9px; align-items: center; font-size: 11px; margin-top: 32px; padding: 10px 8px; border: 1px solid var(--pz-border); border-radius: var(--r-sm); }
.workspace-avatar > span { font-size: 9px; flex: 1; }.workspace-avatar small { display: block; color: var(--ink-500); font-size: 8px; margin-top: 3px; }
.demo-sidebar-nav { margin-top: 23px; display: grid; gap: 9px; }
.demo-sidebar-nav > div { display: flex; align-items: center; gap: 10px; padding: 11px 9px; font-size: 10px; color: var(--ink-500); border-radius: var(--r-sm); }
.demo-sidebar-nav > div.active { color: var(--brand-500); background: color-mix(in oklch, var(--brand-500) 8%, transparent); }
.new-dot { margin-left: auto; width: 4px; height: 4px; background: var(--brand-500); border-radius: 50%; }
.sidebar-bottom { margin-top: auto; padding: 30px 0 4px; text-align: center; color: var(--ink-300); }
.sidebar-bottom > svg { margin: auto; opacity: .75; }.sidebar-bottom p { margin-top: 13px; color: var(--ink-500); font-size: 9px; }
.connection-line { margin: 13px auto 0; width: 35px; display: flex; align-items: center; justify-content: space-between; }.connection-line span { width: 3px; height: 3px; background: var(--brand-500); border-radius: 50%; }.connection-line span:nth-child(2) { opacity: .4; }
.demo-main { min-width: 0; }.demo-topbar { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; border-bottom: 1px solid var(--pz-border); font-size: 10px; color: var(--ink-500); }
.demo-pill { display: inline-flex; gap: 6px; align-items: center; padding: 5px 7px; border: 1px solid var(--pz-border); border-radius: 4px; font-size: 7px; letter-spacing: .1em; }.demo-pill .status-dot { width: 4px; height: 4px; }
.demo-body { padding: 24px 25px 12px; }.demo-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.demo-heading h2 { font-size: 18px; letter-spacing: -.04em; font-weight: 500; }.demo-heading p { font-size: 10px; color: var(--ink-500); margin-top: 7px; }
.unit-picker { display: flex; align-items: center; gap: 5px; padding: 7px 8px; border: 1px solid var(--pz-border-strong); border-radius: var(--r-sm); color: var(--ink-500); }.unit-picker select { border: 0; background: var(--pz-bg); color: var(--ink-700); font-size: 9px; padding: 3px; max-width: 155px; cursor: pointer; }
.demo-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 23px; }.metric-card { text-align: left; min-width: 0; border: 1px solid var(--pz-border); background: var(--surface-muted); border-radius: var(--r-sm); padding: 15px; transition: border-color var(--motion-base), background var(--motion-base); }.metric-card.is-active { border-color: color-mix(in oklch, var(--brand-500) 50%, transparent); background: color-mix(in oklch, var(--brand-500) 6%, var(--pz-bg)); }.metric-card:hover { border-color: var(--brand-500); }
.metric-label { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; color: var(--ink-500); }.metric-label svg { color: var(--brand-500); }.metric-card strong { display: block; font-weight: 500; letter-spacing: -.04em; font-size: 24px; margin-top: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }.metric-foot { display: block; color: var(--ink-500); font-size: 8px; margin-top: 8px; }.metric-foot [data-margin] { color: var(--brand-500); }
.chart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 157px; gap: 18px; margin-top: 22px; }.demo-chart { min-width: 0; }.chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.chart-heading h3 { font-size: 11px; font-weight: 500; }.chart-heading > span { font-size: 8px; color: var(--ink-500); }
.chart-plot { position: relative; height: 174px; margin-top: 9px; }.chart-gridlines { position: absolute; inset: 10px 0 25px; display: flex; flex-direction: column; justify-content: space-between; }.chart-gridlines span { border-bottom: 1px dashed var(--pz-border-strong); }.chart-bars { position: absolute; inset: 10px 5px 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }.bar-column { position: relative; height: calc(100% - 28px); display: flex; justify-content: flex-end; flex-direction: column; align-items: center; }.chart-bar { width: 80%; max-width: 41px; height: var(--bar-height); min-height: 2px; flex-shrink: 0; background: var(--brand-500); border-radius: 4px 4px 0 0; transition: height 450ms var(--ease-emphasized), background var(--motion-base); }.bar-column:nth-child(2n) .chart-bar { background: color-mix(in oklch, var(--brand-500) 65%, var(--pz-bg)); }.bar-column:last-child .chart-bar { background: var(--brand-500); box-shadow: 0 0 25px color-mix(in oklch, var(--brand-500) 10%, transparent); }.bar-label { position: absolute; bottom: -24px; font-size: 8px; color: var(--ink-500); }.bar-value { font-size: 7px; margin-bottom: 5px; color: var(--ink-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-insight { border-left: 1px solid var(--pz-border); padding-left: 18px; text-align: center; position: relative; }.chart-insight > svg { position: absolute; right: 0; top: 3px; color: var(--brand-500); width: 14px; }.insight-ring { width: 104px; height: 104px; position: relative; margin: 0 auto 9px; }.insight-ring svg { width: 100%; fill: none; transform: rotate(-90deg); }.insight-ring circle { stroke: var(--chart-track); stroke-width: 7; }.insight-ring .ring-value { stroke: var(--brand-500); stroke-dasharray: 258; stroke-dashoffset: 179; stroke-linecap: round; transition: stroke-dashoffset 450ms; }.insight-ring > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand-500); font-size: 20px; letter-spacing: -.05em; }.chart-insight > strong { display: block; font-size: 10px; font-weight: 500; }.chart-insight p { font-size: 9px; color: var(--ink-500); line-height: 1.7; margin-top: 8px; }
.demo-footnote { display: flex; justify-content: space-between; align-items: center; color: var(--ink-500); font-size: 8px; margin-top: 17px; border-top: 1px solid var(--pz-border); padding-top: 11px; }
.floating-note { position: absolute; bottom: 83px; right: -45px; display: flex; align-items: center; gap: 12px; padding: 17px 19px; border: 1px solid var(--pz-border-strong); border-radius: var(--r-md); background: var(--elev-2); box-shadow: var(--shadow-hover); transform: rotate(-3deg); pointer-events: none; }.floating-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--brand-500) 10%, transparent); color: var(--brand-500); }.floating-note strong { display: block; font-size: 11px; font-weight: 500; }.floating-note div > span { font-size: 9px; display: block; margin-top: 5px; color: var(--ink-500); }.floating-spark { margin-left: 10px; color: var(--brand-500); }
.demo-hint { display: flex; gap: 6px; justify-content: center; align-items: center; font-size: 9px; color: var(--ink-500); margin-top: 21px; }.demo-hint svg { color: var(--brand-500); }
.integrations { padding-block: 62px 65px; text-align: center; }.integrations > p { font-size: 8px; color: var(--ink-500); letter-spacing: .17em; }.integration-logos { display: flex; align-items: center; justify-content: center; gap: 65px; margin-top: 27px; }.integration-logos > span { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.04em; color: var(--ink-500); }.ab-mark { font-size: 35px; font-weight: 800; line-height: 1; font-style: italic; }.integration-logos > span:last-child { font-size: 17px; font-weight: 500; }
.light-section { background: var(--ink-900); color: var(--on-brand); --section-muted: color-mix(in oklch, var(--on-brand) 72%, transparent); --section-border: color-mix(in oklch, var(--on-brand) 13%, transparent); }
.features { padding-block: 98px; }.section-heading { display: flex; gap: 55px; justify-content: space-between; align-items: flex-end; margin-bottom: 43px; }.light-section .eyebrow { color: var(--section-muted); }.section-heading h2, .process h2, .faq h2 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; letter-spacing: -.055em; line-height: 1.14; margin-top: 19px; }.section-heading h2 span { color: var(--section-muted); }.section-heading > p { max-width: 310px; font-size: 13px; color: var(--section-muted); line-height: 1.8; padding-bottom: 3px; }
.feature-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }.feature-card { border: 1px solid var(--section-border); border-radius: var(--r-card); overflow: hidden; background: color-mix(in oklch, var(--ink-900) 64%, white); padding: 30px; position: relative; }.feature-tag { display: block; font-size: 8px; font-weight: 600; letter-spacing: .13em; color: var(--section-muted); }.feature-card h3 { font-size: 25px; line-height: 1.2; letter-spacing: -.04em; font-weight: 500; max-width: 320px; margin-top: 17px; }.feature-card p { font-size: 12px; line-height: 1.8; color: var(--section-muted); margin-top: 13px; max-width: 400px; }.profit-visual { border: 1px solid var(--section-border); border-radius: var(--r-sm); padding: 20px 22px 15px; margin: 29px 7px -2px; background: var(--ink-900); box-shadow: 0 10px 25px color-mix(in oklch, var(--on-brand) 4%, transparent); }.mini-report-head { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; margin-bottom: 17px; }.mini-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-600); margin-left: auto; }.report-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 11px; }.report-row > span { color: var(--section-muted); }.report-row > strong { font-weight: 500; }.profit-row { border-top: 1px solid var(--section-border); margin-top: 4px; }.profit-row > strong { display: flex; gap: 10px; align-items: center; font-size: 24px; letter-spacing: -.055em; }.profit-strip { display: flex; gap: 4px; margin-top: 10px; height: 17px; }.profit-strip span { background: var(--brand-500); flex: 1; border-radius: 3px; }.profit-strip span:nth-child(n+9) { background: color-mix(in oklch, var(--on-brand) 10%, transparent); }.profit-visual > small, .locations-visual > small, .visual-caption { display: block; margin-top: 12px; color: var(--section-muted); font-size: 8px; }
.feature-locations { background: color-mix(in oklch, var(--brand-500) 9%, var(--ink-900)); }.locations-visual { margin-top: 41px; }.locations-label { font-size: 10px; font-weight: 500; margin-bottom: 15px; }.location-row { display: grid; grid-template-columns: 27px 62px 1fr 70px; gap: 9px; align-items: center; padding-block: 12px; }.location-icon { display: grid; place-items: center; background: color-mix(in oklch, var(--on-brand) 5%, transparent); width: 26px; height: 26px; border-radius: 6px; }.location-row > span:nth-child(2) { font-size: 10px; }.location-row strong { font-size: 10px; font-weight: 500; text-align: right; }.location-track { height: 11px; border-radius: 3px; background: color-mix(in oklch, var(--on-brand) 6%, transparent); overflow: hidden; }.location-track > span { display: block; height: 100%; background: var(--on-brand); border-radius: 3px; }.location-row:nth-child(3) .location-track > span { opacity: .6; }.location-row:nth-child(4) .location-track > span { opacity: .35; }
.feature-cash { min-height: 365px; }.cash-visual { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; position: relative; }.cash-line { position: absolute; left: 0; right: 0; top: 29px; border-top: 1px dashed var(--section-border); }.cash-day { position: relative; min-width: 0; }.cash-day > span { font-size: 9px; color: var(--section-muted); }.cash-day > i { display: block; width: 7px; height: 7px; background: var(--brand-600); border-radius: 50%; margin-block: 10px 14px; outline: 4px solid var(--ink-900); }.cash-event { padding: 11px 9px; border: 1px solid color-mix(in oklch, var(--brand-600) 25%, transparent); border-radius: var(--r-sm); background: color-mix(in oklch, var(--brand-500) 10%, transparent); }.cash-event small { display: block; font-size: 8px; color: var(--section-muted); }.cash-event strong { display: block; font-weight: 500; font-size: 14px; margin-top: 6px; white-space: nowrap; letter-spacing: -.04em; }.cash-out { background: color-mix(in oklch, var(--chart-6) 9%, transparent); border-color: color-mix(in oklch, var(--chart-6) 25%, transparent); }
.feature-whatsapp { background: color-mix(in oklch, var(--on-brand) 4%, var(--ink-900)); }.message-visual { margin: 25px 8px -60px; border: 1px solid var(--section-border); border-radius: 14px 14px 0 0; padding: 16px 18px 23px; background: var(--ink-900); box-shadow: 0 10px 30px color-mix(in oklch, var(--on-brand) 7%, transparent); transform: rotate(-2deg); }.message-header { display: flex; align-items: center; gap: 10px; }.message-avatar { display: grid; place-items: center; background: var(--on-brand); color: var(--brand-500); width: 36px; height: 36px; border-radius: 50%; }.message-header strong { display: block; font-size: 11px; font-weight: 600; }.message-header div > span { display: block; font-size: 8px; color: var(--section-muted); margin-top: 3px; }.message-header > small { margin-left: auto; font-size: 8px; color: var(--section-muted); }.message-bubble { padding: 16px; margin-top: 15px; background: color-mix(in oklch, var(--brand-500) 14%, var(--ink-900)); border-radius: 0 9px 9px 9px; }.message-bubble > strong { font-size: 11px; font-weight: 500; display: flex; gap: 5px; align-items: center; }.message-bubble p { font-size: 10px; margin-top: 7px; }.message-attachment { display: flex; align-items: center; gap: 10px; background: color-mix(in oklch, var(--ink-900) 65%, transparent); margin-top: 12px; padding: 10px; border-radius: 5px; }.message-attachment > span { flex: 1; font-size: 9px; }.message-attachment small { display: block; margin-top: 4px; font-size: 7px; color: var(--section-muted); }
.process { padding-block: 96px 0; position: relative; overflow: hidden; }.process-heading { text-align: center; }.process .eyebrow { color: var(--brand-500); }.process h2 span { color: var(--ink-500); }.process-heading > p:last-child { font-size: 13px; color: var(--ink-500); margin-top: 20px; }.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-top: 62px; }.step-top { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--pz-border-strong); padding-top: 22px; }.step-top > span { font-size: 12px; color: var(--ink-500); font-family: var(--font-mono); }.step-top > svg { color: var(--brand-500); }.process-step h3 { font-weight: 500; font-size: 19px; letter-spacing: -.035em; margin-top: 30px; }.process-step p { font-size: 12px; line-height: 1.9; color: var(--ink-500); margin-top: 13px; }.manifesto { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 72px; padding-block: 35px; border-top: 1px solid var(--pz-border); }.manifesto > svg { color: var(--brand-500); }.manifesto p { font-size: 16px; letter-spacing: -.025em; color: var(--ink-700); }
.faq { padding-block: 92px; }.faq-layout { display: grid; grid-template-columns: .9fr 1.2fr; gap: 96px; }.faq-intro > p:last-of-type { font-size: 12px; line-height: 1.8; color: var(--section-muted); max-width: 260px; margin-top: 23px; }.faq-brand { margin-top: 38px; color: var(--brand-600); opacity: .25; }.faq-list details { border-bottom: 1px solid var(--section-border); }.faq-list details:first-child { border-top: 1px solid var(--section-border); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 13px; font-weight: 500; line-height: 1.6; padding: 21px 0; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-plus { width: 12px; height: 12px; position: relative; flex-shrink: 0; }.faq-plus::before, .faq-plus::after { content: ''; position: absolute; width: 12px; height: 1px; background: currentColor; top: 5px; }.faq-plus::after { transform: rotate(90deg); transition: transform var(--motion-base); }details[open] .faq-plus::after { transform: rotate(0); }.faq-list details > p { padding: 0 30px 22px 0; font-size: 12px; line-height: 1.9; color: var(--section-muted); }
.final-cta { background: var(--brand-500); color: var(--on-brand); overflow: hidden; }.cta-inner { position: relative; padding-block: 78px; }.final-cta .eyebrow { position: relative; }.final-cta h2 { position: relative; font-weight: 500; font-size: clamp(37px, 4.5vw, 61px); line-height: 1.09; letter-spacing: -.055em; margin-top: 22px; }.final-cta .cta-inner > p:not(.eyebrow) { position: relative; font-size: 13px; margin-top: 22px; }.button-dark { position: relative; background: var(--on-brand); color: var(--ink-900); margin-top: 30px; }.button-dark:hover { background: color-mix(in oklch, var(--on-brand) 90%, black); }.cta-demo { position: relative; margin-left: 25px; display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; padding: 15px 0; }.cta-demo:hover { text-decoration: underline; text-underline-offset: 5px; }.cta-watermark { position: absolute; right: -30px; top: 50%; transform: translateY(-50%) rotate(12deg); color: var(--on-brand); opacity: .09; }
.site-footer { padding-block: 48px 25px; }.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }.footer-top > div > p { font-size: 11px; color: var(--ink-500); margin-top: 15px; }.site-footer nav { display: flex; gap: 28px; font-size: 11px; color: var(--ink-500); padding-top: 10px; }.back-top { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--pz-border-strong); border-radius: 50%; }.back-top svg { transform: rotate(-90deg); }.back-top:hover { color: var(--brand-500); border-color: var(--brand-500); }.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 38px; border-top: 1px solid var(--pz-border); padding-top: 22px; font-size: 9px; color: var(--ink-500); }.footer-bottom > span:last-child { display: flex; gap: 10px; align-items: center; }.footer-star { color: var(--brand-500); font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: arrive 800ms var(--ease-emphasized) both; }
  .demo-stage { animation: arrive 1000ms 130ms var(--ease-emphasized) both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
}
@media (min-width: 1700px) { .container { width: min(1260px, calc(100% - 100px)); }.demo-stage { width: 1120px; }.hero { padding-top: 96px; } }
@media (max-width: 1050px) {
  .container { width: calc(100% - 56px); }.nav-row { gap: 20px; }.desktop-nav { gap: 20px; font-size: 11px; }.nav-actions { gap: 18px; }.nav-login { gap: 10px; }
  .demo-stage { width: calc(100% - 80px); }.dashboard-shell { grid-template-columns: 157px minmax(0, 1fr); }.demo-sidebar { padding-inline: 12px; }.demo-brand { font-size: 13px; }.demo-body { padding-inline: 18px; }.metric-card { padding: 12px; }.metric-card strong { font-size: 21px; }.chart-layout { grid-template-columns: minmax(0, 1fr) 126px; gap: 13px; }.chart-insight { padding-left: 12px; }.floating-note { right: -20px; bottom: 64px; transform: rotate(-3deg) scale(.9); transform-origin: right bottom; }
  .integration-logos { gap: 35px; }.integration-logos > span { font-size: 17px; }.feature-card { padding: 26px; }.feature-card h3 { font-size: 23px; }.location-row { grid-template-columns: 25px 53px 1fr 65px; gap: 6px; }.process-steps { gap: 35px; }.faq-layout { gap: 55px; }.cta-watermark { right: -100px; }
}
@media (max-width: 800px) {
  .desktop-nav { display: none; }.menu-toggle { display: inline-flex; }.nav-row { height: 73px; }.nav-actions { gap: 20px; }.hero { padding-top: 62px; }h1 { font-size: clamp(39px, 6.5vw, 59px); }.hero-intro { max-width: 470px; font-size: 14px; }
  .demo-stage { width: calc(100% - 56px); margin-top: 51px; }.dashboard-shell { grid-template-columns: minmax(0, 1fr); min-height: auto; }.demo-sidebar { display: none; }.demo-body { padding: 22px; }.demo-topbar { height: 43px; }.demo-topbar > span:first-child { display: inline-flex; align-items: center; }.chart-layout { grid-template-columns: minmax(0, 1fr) 140px; }.floating-note { display: none; }.chart-bars { gap: 23px; }.metric-card strong { font-size: 25px; }
  .integrations { padding-block: 48px; }.integration-logos { gap: 25px; }.integration-logos > span { font-size: 15px; }.integration-logos > span:last-child { font-size: 14px; }.integration-logos svg { width: 21px; }
  .section-heading { gap: 30px; }.section-heading > p { max-width: 250px; font-size: 12px; }.section-heading h2 { font-size: 34px; }.features { padding-block: 68px; }.feature-grid { grid-template-columns: 1fr 1fr; gap: 15px; }.feature-card { padding: 22px; }.feature-card h3 { font-size: 22px; }.feature-card p { font-size: 11px; }.profit-visual { margin-inline: 0; padding: 15px; }.profit-row > strong { font-size: 19px; }.location-row { grid-template-columns: 20px 1fr 65px; }.location-track { grid-column: 2 / 4; grid-row: 2; height: 5px; }.location-row strong { grid-column: 3; grid-row: 1; }.cash-visual { gap: 7px; }.cash-day > span { font-size: 8px; }.cash-event { padding: 9px 6px; }.cash-event strong { font-size: 11px; }.cash-event small { font-size: 7px; }.message-visual { margin-inline: 0; padding: 13px; }.message-bubble { padding: 12px; }
  .process { padding-top: 68px; }.process-steps { gap: 25px; margin-top: 45px; }.process-step h3 { font-size: 17px; }.process-step p { font-size: 11px; }.manifesto { gap: 16px; margin-top: 50px; }.manifesto p { font-size: 14px; }.faq { padding-block: 68px; }.faq-layout { grid-template-columns: 1fr 1.25fr; gap: 35px; }.faq h2 { font-size: 34px; }.faq-list summary { font-size: 12px; }.faq-list details > p { font-size: 11px; }.cta-inner { padding-block: 65px; }.cta-watermark { right: -160px; opacity: .07; }.site-footer nav { gap: 17px; font-size: 10px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 85px; }.container { width: calc(100% - 40px); }.nav-row { height: 68px; gap: 10px; }.nav-row .marca-nome { font-size: 19px !important; }.nav-row .marca-simbolo { width: 26px; height: 26px; }.nav-actions { gap: 14px; }.nav-login { display: none; }.language-switch { gap: 6px; font-size: 10px; }.language-switch > svg { display: none; }.menu-toggle { padding: 7px; }
  .hero { padding-top: 48px; }.hero-eyebrow { font-size: 7px; padding: 7px 9px; letter-spacing: .12em; }h1 { font-size: clamp(32px, 7.7vw, 46px); letter-spacing: -.06em; line-height: 1.16; margin-top: 25px; }.hero-highlight > svg { height: 9px; bottom: -7px; }.hero-intro { font-size: 12px; max-width: 340px; margin-top: 27px; line-height: 1.9; }.hero-actions { gap: 5px; margin-top: 22px; }.button { min-height: 46px; font-size: 10px; gap: 12px; padding: 13px 16px; }.button-text { gap: 6px; padding-inline: 11px; }.button-text svg { width: 13px; }.hero-note { font-size: 9px; margin-top: 16px; }
  .demo-stage { margin-top: 41px; }.demo-caption { font-size: 6px; letter-spacing: .07em; }.demo-caption > span { gap: 5px; }.dashboard-shell { border-radius: 9px; box-shadow: 0 20px 50px var(--overlay-scrim), 0 0 0 4px var(--overlay-hover); }.demo-topbar { padding-inline: 14px; height: 38px; font-size: 9px; }.demo-pill { font-size: 6px; }.demo-body { padding: 17px 13px 10px; }.demo-heading { align-items: flex-start; flex-direction: column; gap: 13px; }.demo-heading h2 { font-size: 17px; }.demo-heading p { font-size: 9px; }.unit-picker { align-self: stretch; padding: 7px 8px; }.unit-picker select { max-width: none; flex: 1; font-size: 10px; }.demo-metrics { gap: 7px; margin-top: 14px; }.metric-card { padding: 10px 7px; }.metric-label { font-size: 8px; gap: 2px; }.metric-label svg { width: 10px; height: 10px; }.metric-card strong { font-size: clamp(14px, 4.1vw, 20px); letter-spacing: -.055em; margin-top: 9px; }.metric-foot { font-size: 6px; line-height: 1.6; margin-top: 5px; }.chart-layout { grid-template-columns: 1fr; margin-top: 20px; }.chart-insight { display: none; }.chart-heading h3 { font-size: 10px; }.chart-heading > span { font-size: 8px; }.chart-plot { height: 159px; }.chart-bars { gap: 13px; inset-inline: 1px; }.bar-value { font-size: 6px; }.chart-bar { width: 76%; }.bar-label { font-size: 7px; }.demo-footnote { margin-top: 13px; font-size: 7px; }.demo-footnote svg { display: none; }.demo-hint { font-size: 8px; margin-top: 15px; }
  .integrations { padding-block: 37px 43px; }.integrations > p { font-size: 7px; letter-spacing: .1em; }.integration-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 27px; margin: 26px auto 0; max-width: 300px; }.integration-logos > span { justify-content: center; font-size: 14px; }.integration-logos > span:last-child { font-size: 13px; }.integration-logos svg { width: 20px; }.ab-mark { font-size: 28px; }
  .features { padding-block: 54px; }.section-heading { display: block; margin-bottom: 28px; }.eyebrow { font-size: 8px; }.section-heading h2, .process h2, .faq h2 { font-size: 34px; margin-top: 15px; }.section-heading > p { max-width: 330px; margin-top: 20px; font-size: 12px; }.feature-grid { grid-template-columns: 1fr; gap: 15px; }.feature-card { padding: 25px; }.feature-tag { font-size: 8px; }.feature-card h3 { font-size: 26px; max-width: 285px; margin-top: 16px; }.feature-card p { font-size: 12px; }.profit-visual { padding: 19px; margin-top: 25px; }.profit-row > strong { font-size: 24px; }.locations-visual { margin-top: 27px; }.location-row { grid-template-columns: 27px 63px 1fr 70px; gap: 8px; }.location-track { grid-column: auto; grid-row: auto; height: 9px; }.location-row strong { grid-column: auto; grid-row: auto; }.feature-cash { min-height: auto; }.cash-visual { gap: 10px; margin-top: 28px; }.cash-day > span { font-size: 9px; }.cash-event { padding: 11px 8px; }.cash-event strong { font-size: 13px; }.cash-event small { font-size: 8px; }.feature-whatsapp { padding-bottom: 0; }.message-visual { margin: 25px 9px -16px; padding: 16px; }.message-bubble { padding: 15px; }
  .process { padding-top: 56px; }.process-heading { text-align: left; }.process-heading > p:last-child { font-size: 12px; max-width: 280px; }.process-steps { grid-template-columns: 1fr; gap: 29px; margin-top: 36px; }.step-top { padding-top: 18px; }.process-step h3 { font-size: 21px; margin-top: 19px; }.process-step p { font-size: 12px; max-width: 320px; margin-top: 10px; }.manifesto { align-items: flex-start; gap: 17px; margin-top: 39px; padding-block: 26px; }.manifesto > svg { width: 29px; height: 29px; }.manifesto p { font-size: 13px; line-height: 1.7; max-width: 250px; }
  .faq { padding-block: 52px; }.faq-layout { grid-template-columns: 1fr; gap: 29px; }.faq-intro > p:last-of-type { margin-top: 17px; max-width: 290px; }.faq-brand { display: none; }.faq-list summary { font-size: 12px; padding-block: 19px; }.faq-list details > p { font-size: 12px; padding-right: 12px; }
  .cta-inner { padding-block: 53px; }.final-cta h2 { font-size: 37px; margin-top: 20px; }.final-cta .cta-inner > p:not(.eyebrow) { max-width: 270px; line-height: 1.8; font-size: 12px; margin-top: 20px; }.cta-watermark { right: -290px; }.button-dark { margin-top: 24px; }.cta-demo { margin-left: 18px; font-size: 10px; gap: 7px; }.cta-demo svg { width: 13px; }
  .site-footer { padding-top: 35px; }.footer-top { flex-wrap: wrap; gap: 27px 20px; }.footer-top > div { flex: 1; }.footer-top .marca-nome { font-size: 21px !important; }.footer-top > div > p { font-size: 10px; }.site-footer nav { order: 3; width: 100%; gap: 26px; padding-top: 0; }.back-top { width: 35px; height: 35px; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 13px; margin-top: 25px; font-size: 8px; }
}
@media (max-width: 359px) { .container { width: calc(100% - 28px); }.nav-actions { gap: 9px; }.hero-actions { flex-direction: column; gap: 2px; }.hero-actions .button-primary { min-width: 220px; }.hero h1 { font-size: 29px; }.metric-card strong { font-size: 13px; }.feature-card { padding: 20px; }.location-row { grid-template-columns: 23px 52px 1fr 62px; gap: 5px; }.cta-demo { display: flex; margin-left: 0; }.final-cta h2 { font-size: 33px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; }.button:hover { transform: none; } }
@media print { .site-header, .hero-orbit, .hero-grid, .hero-actions, .floating-note, .menu-toggle, .back-top, .final-cta { display: none; }.hero { padding-top: 20px; }.container { width: 100%; }.dashboard-shell, .feature-card, .process-step, .faq-list details { break-inside: avoid; }body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }.features, .faq, .process { padding-block: 35px; } }