/* inForm landing v10.0: base comum. Tokens que mudam com o tom (transição do v8),
   tipografia, faixas, botões, cabeçalho. Seções NÃO editam este arquivo. */

/* As cores do tom são registradas como <color> para o body interpolar (0,9 s). */
@property --page    { syntax: '<color>'; inherits: true; initial-value: #07101a; }
@property --ink     { syntax: '<color>'; inherits: true; initial-value: #eef2f5; }
@property --ink-2   { syntax: '<color>'; inherits: true; initial-value: #a7b3bf; }
@property --ink-3   { syntax: '<color>'; inherits: true; initial-value: #66737f; }
@property --line    { syntax: '<color>'; inherits: true; initial-value: rgba(238,242,245,.14); }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #0d1822; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #13212e; }
@property --accent  { syntax: '<color>'; inherits: true; initial-value: #2fe0cc; }
@property --btn     { syntax: '<color>'; inherits: true; initial-value: #eef2f5; }
@property --btn-ink { syntax: '<color>'; inherits: true; initial-value: #07101a; }
/* marca: "in" e "Form" do logo e da classe .wm, com contraste por tom */
@property --wm-in    { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --wm-form  { syntax: '<color>'; inherits: true; initial-value: #00c8b4; }
@property --logo-glow { syntax: '<color>'; inherits: true; initial-value: rgba(0,200,180,.3); }

@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-display.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrumentsans-variable.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrainsmono-variable.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../fonts/syne-variable.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }

:root {
  /* fixas (não mudam com o tom) */
  --teal: #00c8b4;
  --teal-hi: #3ff2dc;
  --teal-deep: #00796d;
  --amber: #e8b04b;
  --blue: #8fb3ff;
  --coral: #ef8f7d;
  --panel: #05080c;          /* painéis escuros do v9 (HUD, documento) */
  --panel-2: #0c1218;
  --panel-3: #141c24;
  --on-panel: #eef2f5;
  --on-panel-2: #8d98a3;
  --navy: #07111c;           /* navy da marca (blocos do v6/v5.7) */
  --wa-bg: #0b141a; --wa-head: #1f2c34; --wa-in: #1f2c34; --wa-out: #005c4b;
  --wa-txt: #e9edef; --wa-meta: #8696a0; --wa-sys: #182229; --wa-check: #53bdeb;

  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --f-display: 'Archivo', 'Geist', sans-serif;   /* blocos copiados do v6 */
  --f-body6: 'Instrument Sans', 'Geist', sans-serif;
  --f-logo: 'Syne', 'Geist', sans-serif;

  --gutter: clamp(18px, 4.4vw, 64px);
  --max: 1280px;
  --nav-h: 64px;
  --r: 18px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* tom escuro é o inicial (o topo é escuro) */
  --page: #07101a; --ink: #eef2f5; --ink-2: #a7b3bf; --ink-3: #66737f;
  --line: rgba(238,242,245,.14); --surface: #0d1822; --surface-2: #13212e;
  --accent: #2fe0cc; --btn: #eef2f5; --btn-ink: #07101a;
  --wm-in: #ffffff; --wm-form: #00c8b4; --logo-glow: rgba(0,200,180,.3);
  color-scheme: dark;
}

body[data-tone="light"] {
  --page: #f1f1ef; --ink: #0b0d10; --ink-2: #4f565e; --ink-3: #8b9198;
  --line: rgba(11,13,16,.12); --surface: #ffffff; --surface-2: #e7e7e4;
  --accent: #00796d; --btn: #0b0d10; --btn-ink: #f3f4f5;
  --wm-in: #1a2633; --wm-form: #00796d; --logo-glow: rgba(0,121,109,0);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); background: #07101a; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Otimização (17/10), mesma transição: animar as cores no body fazia o navegador recalcular a
   página inteira a cada quadro (~750 ms de estilo por troca com CPU 4x lenta). O body troca de
   uma vez e quem anima é cada faixa perto da tela, mais o cabeçalho e o fundo; a faixa longe da
   tela (.tone-off, base.js) recebe o tom novo sem animar, já que ninguém a vê. */
:root {
  /* duração da troca de cores. No celular (toque) é 1,55x mais lenta: rodando liso, a troca
     de 0,9 s ficou rápida demais na tela pequena (17/10). base.js usa o mesmo fator na parede. */
  --tone-d: .9s;
  --tone-tr: --page var(--tone-d) var(--ease-io), --ink var(--tone-d) var(--ease-io), --ink-2 var(--tone-d) var(--ease-io),
             --ink-3 var(--tone-d) var(--ease-io), --line var(--tone-d) var(--ease-io), --surface var(--tone-d) var(--ease-io),
             --surface-2 var(--tone-d) var(--ease-io), --accent var(--tone-d) var(--ease-io), --btn var(--tone-d) var(--ease-io),
             --btn-ink var(--tone-d) var(--ease-io), --wm-in var(--tone-d) var(--ease-io), --wm-form var(--tone-d) var(--ease-io),
             --logo-glow var(--tone-d) var(--ease-io);
}
@media (pointer: coarse) { :root { --tone-d: 1.4s; } }
@media (prefers-reduced-motion: reduce) { :root { --tone-tr: --page 0s; } }
.band:not(.tone-off), body > footer[data-tone]:not(.tone-off), .tone-bg { transition: var(--tone-tr); }

/* Camadas de fundo (base.js), atrás de todo o conteúdo, na ordem:
   .tone-bg   = fundo liso do tom (sem WebGL, movimento reduzido ou antes do 1º quadro);
   .tone-wall = parede WebGL do v8: a troca de tom se dissolve com ruído (porte do relief.js);
   .tone-net  = campo de pontos que ligam ao cursor (v7.3).
   Com as camadas ativas, o body fica transparente. */
.tone-bg, .tone-wall, .tone-net {
  position: fixed; left: 0; right: 0; top: 0; width: auto; max-width: none;
  height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
}
.tone-bg { background: var(--page); }
.tone-wall { visibility: hidden; }
.tone-wall.on { visibility: visible; }
body.tone-layers { background: transparent; }

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(0,200,180,.28); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--teal); color: #03201c; padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* faixas: o fundo é o do body (tom global); a seção só declara data-tone */
.band { position: relative; padding-block: clamp(80px, 11vw, 150px); background: transparent; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* tipografia comum */
.eyebrow { font: 500 .78rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.h-xl { font: 500 clamp(2.6rem, 6.4vw, 5.6rem)/1.0 var(--sans); letter-spacing: -.035em; }
.h-l  { font: 500 clamp(2rem, 4.4vw, 3.6rem)/1.05 var(--sans); letter-spacing: -.03em; }
.h-m  { font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--sans); letter-spacing: -.02em; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 60ch; margin-top: 20px; }
.muted { color: var(--ink-2); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 500 1rem/1 var(--sans); transition: transform .25s var(--ease-out), background-color .25s, color .25s; }
.btn:hover { transform: translateY(-1px); }
.btn-teal { background: var(--teal); color: #03201c; }
.btn-teal:hover { background: var(--teal-hi); }
.btn-ink { background: var(--btn); color: var(--btn-ink); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* revelação simples: estado de repouso visível sem JS */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* cabeçalho */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px); transition: var(--tone-tr), transform .5s var(--ease-out), background-color .4s; }
.nav-in { height: var(--nav-h); display: flex; align-items: center; gap: 20px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.nav.scrolled { background: color-mix(in srgb, var(--page) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav.away { transform: translateY(-100%); }
/* logo original do site no ar (v5.7: .nav-logo), com o teal ajustado por tom */
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; flex: none; overflow: visible; filter: drop-shadow(0 0 8px var(--logo-glow)); }
.logo-mark .lm-tri { stroke: var(--wm-form); }
.logo-text { font: 800 21px/1 var(--f-logo); letter-spacing: -.5px; color: var(--wm-in); }
.logo-text .logo-form { color: var(--wm-form); }
@media (max-width: 600px) { .logo-text { font-size: 17px; } }

/* marca no texto: <span class="wm"><span class="wm-in">in</span><span class="wm-form">Form</span></span>
   Syne 800 só no nome; o resto da frase segue a fonte da seção. "in" claro e "Form" teal no
   escuro; "in" quase preto e "Form" teal escurecido no claro (contraste). Dentro de um bloco de
   cor fixa, force o tom com .wm-on-dark ou .wm-on-light. */
/* 15/10: sem Syne no texto (só o logo usa Syne). Só a regra de cor: "in" num branco levemente diferente do texto, "Form" teal. */
.wm { font: inherit; white-space: nowrap; }
.wm .wm-in { color: var(--wm-in); }
.wm .wm-form, .wm > b { color: var(--wm-form); font-weight: inherit; }
.wm.wm-on-dark { --wm-in: #ffffff; --wm-form: #00c8b4; }
.wm.wm-on-light { --wm-in: #1a2633; --wm-form: #00796d; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-size: .92rem; padding: 8px 12px; border-radius: 999px; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav .btn { min-height: 40px; padding: 0 18px; font-size: .92rem; }
.nav-menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; border-radius: 12px; }
.nav-menu-btn span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--ink); transition: transform .3s; }
.nav-drawer { display: none; }
@media (max-width: 960px) {
  .nav-links, .nav .btn-teal { display: none; }
  .nav-menu-btn { display: block; }
  .nav-drawer { position: fixed; inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 auto 0; background: var(--page); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 24px; display: grid; gap: 4px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
  .nav-drawer a { padding: 14px 4px; text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav-drawer .btn { margin-top: 12px; }
  body.menu-open .nav-drawer { opacity: 1; transform: none; pointer-events: auto; }
  body.menu-open .nav { background: var(--page); }
}

/* Celular em foto (15/10): moldura recortada da foto Pexels 30930310 (licença Pexels, sem crédito).
   Uso: <div class="device"><div class="device-screen">…WhatsApp em HTML…</div><span class="device-frame" aria-hidden="true"></span></div>
   A tela fica POR BAIXO da moldura; a ilha da câmera é da foto, então o cabeçalho do WhatsApp começa abaixo dela
   (padding-top ~ 7% da altura da tela). Medidas em assets/img/celular-moldura.json. */
.device { position: relative; width: min(100%, var(--device-w, 340px)); aspect-ratio: 929 / 1872; margin-inline: auto; filter: drop-shadow(0 38px 46px rgba(5, 10, 16, .38)) drop-shadow(0 6px 12px rgba(5, 10, 16, .22)); }
.device-screen { position: absolute; left: 5.27%; top: 2.46%; width: 89.56%; height: 95.3%; border-radius: 13% / 6.4%; overflow: hidden; background: var(--wa-bg); z-index: 1; }
.device-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url('img/celular-moldura.webp') center / 100% 100% no-repeat; }