/* ─── Apple design system tokens (contract) ─────────────────────────── */
:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface-warm: #fbfbfd;
  --fg: #1d1d1f;
  --fg-2: #424245;
  --muted: #6e6e73;
  --meta: #86868b;
  --border: #d2d2d7;
  --border-soft: #e8e8ed;
  --accent: #0071e3;
  --accent-on: #ffffff;
  --accent-hover: #0077ed;
  --accent-active: #0066cc;
  --success: #16a34a;
  --warn:    #eab308;
  --danger:  #dc2626;
  --font-display: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  --text-xs:12px;--text-sm:14px;--text-base:17px;--text-lg:21px;--text-xl:28px;--text-2xl:40px;--text-3xl:56px;--text-4xl:80px;
  --leading-body:1.47;--leading-tight:1.05;--tracking-display:-0.015em;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;
  --section-y-desktop:100px;--section-y-tablet:64px;--section-y-phone:40px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-pill:980px;
  --elev-flat:none;--elev-ring:0 0 0 1px var(--border);--elev-raised:0 12px 32px rgba(0,0,0,0.08);
  --focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%);
  --motion-fast:150ms;--motion-base:220ms;--ease-standard:cubic-bezier(0.28,0,0.22,1);
  --container-max:1024px;--container-gutter-desktop:22px;--container-gutter-tablet:18px;--container-gutter-phone:16px;
}

/* ─── AdMarketing brand overrides (brand source > system) ────────────
 * Real brand palette read from CORES.svg / logo-completa.svg:
 *   #635DFF primary purple (signal/active/focus)
 *   #53C3FF technical cyan (data lines)
 *   #FF8C00 amber (alert micro-labels), #4CAF50 success
 * Dark "instrument panel" foundation. */
:root {
  /* diz ao navegador que a página é escura: corrige scrollbar nativa,
     controles de formulário, menus de data e o realce de autofill */
  color-scheme: dark;

  /* ── Escada neutra ────────────────────────────────────────────────
   * Uma única matiz (278°, a matiz do roxo da marca) em todos os
   * degraus, com o L do OKLCH subindo em passos perceptualmente
   * regulares (.155 → .205 → .240 → .285). Antes os tons eram hexes
   * soltos e os degraus não eram uniformes: o salto panel→panel-2 era
   * quase invisível e o panel-2→panel-3 pulava demais.
   * Cada token traz um hex antes do oklch como fallback: se o
   * navegador não entender oklch(), a variável ainda resolve. */
  --ink: #0b0b12;            --ink: oklch(0.155 0.014 278);
  --panel: #13131c;          --panel: oklch(0.205 0.018 278);
  --panel-2: #191922;        --panel-2: oklch(0.240 0.021 278);
  --panel-3: #20202c;        --panel-3: oklch(0.285 0.025 278);
  /* hairline: 25% de alfa sobre quase-preto ficava invisível; .40 dá
     contenção real sem virar moldura */
  --line: #2a2a3866;         --line: oklch(0.335 0.026 278 / 0.40);
  --line-strong: #2e2e3e;    --line-strong: oklch(0.345 0.030 278);

  /* ── Escada de texto ──────────────────────────────────────────────
   * Todas com um sopro da matiz da marca (C .005–.021) para o cinza
   * não brigar com o roxo. Sobre --panel: 17.9:1 / 10.5:1 / 6.1:1. */
  --txt: #f4f4f8;            --txt: oklch(0.970 0.005 278);
  --txt-2: #c2c2ce;          --txt-2: oklch(0.815 0.017 278);
  --txt-mut: #95949f;        --txt-mut: oklch(0.668 0.021 278);

  /* ── Sinal (roxo da marca) ────────────────────────────────────────
   * --signal é o hex literal da marca e só preenche superfícies.
   * --signal-hi é a variante clara para TEXTO e ícones sobre escuro:
   * o antigo #7b74ff rendia 5.1:1, apertado para 13–15px; este chega
   * a 7.0:1 e cai exatamente na família do #A594F9 do CORES.svg.
   * Hover/active escurecem em passos exatos de L (−.05 / −.10), então
   * o texto branco sobe de 4.6:1 para 5.5:1 e 6.5:1. */
  --signal: #635dff;
  --signal-hi: #9f92fa;      --signal-hi: oklch(0.715 0.163 281);
  --signal-hover: #5a4fe6;   --signal-hover: oklch(0.535 0.212 279);
  --signal-lo: #4f45ca;      --signal-lo: oklch(0.485 0.196 279);
  --signal-tint: #635dff24;  --signal-tint: oklch(0.585 0.222 279 / 0.14);

  /* ── Cores de dado ────────────────────────────────────────────────
   * Ciano, âmbar e verde NÃO são acentos de interface: identificam
   * séries e proveniência dentro de gráficos, tabelas e leituras.
   * Cada uma ganha uma variante -hi de luminância elevada para quando
   * vira texto sobre fundo escuro. */
  --cyan: #53c3ff;
  --cyan-hi: #a4dcff;        --cyan-hi: oklch(0.855 0.090 236);
  --amber: #ff8c00;
  --amber-hi: #ffa73d;       --amber-hi: oklch(0.820 0.140 72);
  --green: #4caf50;
  --green-hi: #5ed892;       --green-hi: oklch(0.790 0.155 150);
  /* --danger do sistema (#dc2626) rende só 3.1:1 sobre o painel escuro */
  --danger-hi: #fa7a70;      --danger-hi: oklch(0.705 0.175 24);

  /* ── Profundidade ─────────────────────────────────────────────────
   * Sombra preta pura sobre fundo escuro vira buraco. Estas são
   * tingidas na matiz da marca e sempre acompanhadas de --rim, o
   * filete claro no topo que faz a superfície parecer iluminada de
   * cima em vez de recortada. */
  --sh-1: 0 6px 18px rgba(6,4,15,.42);   --sh-1: 0 6px 18px oklch(0.06 0.03 279 / .42);
  --sh-2: 0 18px 44px rgba(6,4,15,.48);  --sh-2: 0 18px 44px oklch(0.06 0.03 279 / .48);
  --sh-3: 0 30px 70px rgba(5,3,13,.58);  --sh-3: 0 30px 70px oklch(0.055 0.03 279 / .58);
  --rim: inset 0 1px 0 rgba(255,255,255,.05);

  /* ── Vidro (adaptado do dashboard RyzeAPI) ───────────────────────
   * O template constrói toda superfície com branco translúcido em
   * três degraus — repouso .03, realce .05, borda de .05 a .20 — mais
   * blur de 8-12px. Reproduzimos os mesmos degraus, mas o branco puro
   * esfria nossa base roxa, então a superfície leva uma pitada da
   * matiz 279 da marca. */
  --glass-bg: rgba(255,255,255,.032);
  --glass-bg-2: rgba(255,255,255,.058);
  --glass-line: rgba(255,255,255,.085);
  --glass-line-2: rgba(255,255,255,.20);
  --glass-blur: blur(14px) saturate(130%);

  /* Raio de luz que acompanha o ponteiro dentro do widget. O JS só
   * escreve --mx/--my; o resto é pintura CSS. */
  --spot-size: 320px;
  --spot-tint: color-mix(in oklab,var(--signal-hi),transparent 86%);

  /* Luz de borda (o .border-glow-card do Ryze). Ali o efeito não é
   * "hover acende a borda": ele mede a PROXIMIDADE do ponteiro à
   * borda (--edge, 0 no centro / 100 na aresta) e o ÂNGULO do centro
   * até o ponteiro (--ang), e só acende o arco da borda que fica
   * naquela direção. Abaixo de --edge-sens nada aparece, então passar
   * pelo meio do widget não dispara luz nenhuma — é o que dá a
   * sensação de aresta metálica reagindo, não de card piscando. */
  --edge-sens: 32;      /* limiar de proximidade (0-100) */
  --edge-reach: 210px;  /* alcance da luz ao longo da borda */
  --edge-c: color-mix(in oklab,var(--signal-hi),#fff 34%);

  /* ── Tipografia ───────────────────────────────────────────────────
   * Montserrat é a fonte oficial do admarketing.com.br, então ela
   * carrega display E corpo. Família única exige separar os papéis por
   * peso e tracking, não por desenho: display em 700/800 com tracking
   * negativo, corpo em 400/500 com tracking neutro. O x-height alto do
   * Montserrat também pede mais entrelinha que o Inter — daí o
   * --leading-body em 1.55.
   * O mono continua JetBrains: métricas, eyebrows e rótulos de dado
   * precisam de largura tabular, que o Montserrat não tem. */
  --font-brand-display: "Montserrat", var(--font-display);
  --font-brand-body: "Montserrat", var(--font-body);
  --font-brand-mono: "JetBrains Mono", var(--font-mono);
  /* Montserrat é geométrico e largo: o tracking do sistema (-.015em)
     ainda deixa os títulos soltos. -.028em fecha sem colar. */
  --tracking-display: -0.028em;
  --leading-body: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════
 * TEMA CLARO
 * Não é o tema escuro com as cores trocadas. Três coisas mudam de
 * natureza:
 *  1. O vidro. No escuro a superfície é branco translúcido sobre
 *     quase-preto; no claro, branco sobre branco não existe, então o
 *     vidro inverte para PRETO translúcido em alfas MENORES (.022 no
 *     lugar de .032, e ainda assim mais presente: tinta escura sobre
 *     branco pesa muito mais que branco sobre quase-preto).
 *  2. As variantes -hi. No escuro elas SOBEM de luminância para virar
 *     texto legível; no claro precisam DESCER. Todas foram recalculadas
 *     para ≥4.5:1 sobre branco.
 *  3. A luz de borda. plus-lighter só clareia — sobre branco não há o
 *     que clarear, o efeito desaparece. No claro ela vira normal com
 *     tinta escura (ver .edge-light mais abaixo).
 * ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"]{
  color-scheme: light;

  /* Escada neutra invertida, mesma matiz 278. O fundo NÃO é branco
     puro: branco puro tira o card branco do lugar. --ink fica um passo
     abaixo para os painéis brancos flutuarem sobre ele. */
  --ink: #f5f5f9;            --ink: oklch(0.972 0.004 278);
  --panel: #ffffff;          --panel: oklch(1 0 0);
  --panel-2: #f1f1f6;        --panel-2: oklch(0.955 0.006 278);
  --panel-3: #e6e6ee;        --panel-3: oklch(0.925 0.009 278);
  --line: #5b5b7029;         --line: oklch(0.480 0.020 278 / 0.16);
  --line-strong: #e1e1e9;    --line-strong: oklch(0.895 0.008 278);

  /* Escada de texto. Sobre --panel: 15.9:1 / 7.9:1 / 4.8:1 — e a
     mut ainda passa 4.6:1 sobre --ink, que é onde ela mais aparece. */
  --txt: #1c1b26;            --txt: oklch(0.245 0.020 278);
  --txt-2: #58566a;          --txt-2: oklch(0.435 0.022 278);
  --txt-mut: #6f6d81;        --txt-mut: oklch(0.535 0.022 278);

  /* O roxo da marca não muda: #635dff com branco em cima dá os mesmos
     4.6:1 nos dois temas. O que muda é a variante de TEXTO. */
  --signal-hi: #5a4bd8;      --signal-hi: oklch(0.505 0.225 279);
  --signal-tint: #635dff1f;  --signal-tint: oklch(0.585 0.222 279 / 0.12);

  /* Cores de dado: as bases descem um pouco para não sumir como
     preenchimento sobre branco, e as -hi descem de vez porque viram
     texto. #53c3ff sobre branco rende 1.9:1 — ilegível. */
  --cyan: #29a3e8;           --cyan: oklch(0.665 0.130 236);
  --cyan-hi: #0f6fa8;        --cyan-hi: oklch(0.520 0.115 236);
  --amber: #e07800;          --amber: oklch(0.680 0.155 62);
  --amber-hi: #8f5000;       --amber-hi: oklch(0.520 0.120 60);
  --green: #3d9a52;          --green: oklch(0.615 0.135 150);
  --green-hi: #1f7a44;       --green-hi: oklch(0.505 0.120 150);
  --danger-hi: #c2321f;      --danger-hi: oklch(0.505 0.180 27);

  /* Profundidade: sobre branco a sombra volta a ser sombra de verdade,
     mas tingida na matiz da marca e muito mais suave — 0.42 de alfa
     aqui viraria mancha. --rim quase desaparece: sobre um card branco
     um filete branco não faz nada, e o único lugar onde ele ainda
     aparece é em cima do roxo do botão — onde .9 de alfa seria um
     risco duro. Fica em .28: realce no botão, invisível no card. */
  --sh-1: 0 2px 8px rgba(38,32,74,.06);    --sh-1: 0 2px 8px oklch(0.30 0.04 279 / .07), 0 1px 2px oklch(0.30 0.04 279 / .05);
  --sh-2: 0 10px 28px rgba(38,32,74,.10);  --sh-2: 0 10px 28px oklch(0.30 0.04 279 / .10), 0 2px 6px oklch(0.30 0.04 279 / .06);
  --sh-3: 0 22px 52px rgba(38,32,74,.14);  --sh-3: 0 22px 52px oklch(0.28 0.04 279 / .14), 0 4px 10px oklch(0.28 0.04 279 / .07);
  --rim: inset 0 1px 0 rgba(255,255,255,.28);

  /* Vidro invertido: tinta escura da matiz da marca em alfa baixo. */
  --glass-bg: rgba(43,36,82,.022);         --glass-bg: oklch(0.30 0.035 279 / .022);
  --glass-bg-2: rgba(43,36,82,.045);       --glass-bg-2: oklch(0.30 0.035 279 / .045);
  --glass-line: rgba(43,36,82,.10);        --glass-line: oklch(0.30 0.035 279 / .10);
  /* a borda de hover no claro não pode ser "preto mais forte" — vira
     luto. Ela assume a matiz do sinal. */
  --glass-line-2: rgba(99,93,255,.40);     --glass-line-2: oklch(0.585 0.222 279 / .40);
  --glass-blur: blur(14px) saturate(140%);

  /* O raio do ponteiro precisa de menos tinta: sobre branco, 14% de
     roxo já é uma mancha visível. */
  --spot-tint: color-mix(in oklab,var(--signal),transparent 91%);
  /* e a luz de borda deixa de ser "clarão" para ser tinta roxa */
  --edge-c: color-mix(in oklab,var(--signal),#fff 8%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* barra de rolagem no tema do painel, não no cinza padrão do SO */
  scrollbar-width:thin;scrollbar-color:var(--panel-3) var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--panel-3);border:3px solid var(--ink);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:var(--txt);
  font-family:var(--font-brand-body);font-size:var(--text-base);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
/* seleção no tom escuro do sinal: branco sobre --signal-lo dá 6.5:1,
   contra 4.6:1 do roxo cheio */
::selection{background:var(--signal-lo);color:#fff}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
/* outline em vez de box-shadow: não é sobrescrito pelas sombras de hover
   dos botões e mantém ≥3:1 contra o fundo (signal-hi vs ink = 7.7:1) */
:focus-visible{outline:2px solid var(--signal-hi);outline-offset:3px;border-radius:6px}
/* sobre superfície roxa o anel roxo sumiria: inverte para branco */
.btn-primary:focus-visible,.skip-link:focus-visible{outline-color:#fff}

.skip-link{position:absolute;left:16px;top:-80px;z-index:200;background:var(--signal);color:#fff;
  font-family:var(--font-brand-body);font-weight:600;font-size:14px;padding:12px 20px;border-radius:var(--radius-pill);
  transition:top var(--motion-fast) var(--ease-standard)}
.skip-link:focus-visible{top:14px}

.container{max-width:1180px;margin-inline:auto;padding-inline:24px}
.mono{font-family:var(--font-brand-mono)}
.eyebrow{
  font-family:var(--font-brand-mono);font-size:12px;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--signal-hi);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--signal),transparent 78%);animation:pulse 2.4s var(--ease-standard) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.eyebrow::before{animation:none}}

/* 700, não 600: com display e corpo na mesma família, o peso é o que
   separa um título de um parágrafo em negrito. */
h1,h2,h3{font-family:var(--font-brand-display);letter-spacing:var(--tracking-display);line-height:1.1;font-weight:700;text-wrap:balance}
p{text-wrap:pretty}

/* ─── reveal ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ─── buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-brand-body);font-weight:600;font-size:15px;cursor:pointer;border:none;
  padding:13px 24px;border-radius:var(--radius-pill);min-height:48px;
  transition:background var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard);
}
/* o botão sólido já nasce com um halo discreto do próprio roxo; no hover
   o halo cresce e o fundo escurece, então a mudança é de profundidade e
   não o aparecimento súbito de uma sombra */
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 4px 14px color-mix(in oklab,var(--signal),transparent 80%),var(--rim)}
.btn-primary:hover{background:var(--signal-hover);color:#fff;transform:translateY(-1px);box-shadow:0 10px 26px color-mix(in oklab,var(--signal),transparent 62%),var(--rim)}
.btn-primary:active{background:var(--signal-lo);color:#fff;transform:translateY(0);box-shadow:0 2px 8px color-mix(in oklab,var(--signal),transparent 76%)}
.btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--signal-hi);color:var(--txt)}
.btn-ghost:active{background:var(--panel);border-color:var(--signal-hi)}
.btn-lg{padding:16px 32px;font-size:16px;min-height:54px}
.btn svg{width:18px;height:18px;stroke-width:2}

/* ─── header ─── */
.header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background var(--motion-base),border-color var(--motion-base),backdrop-filter var(--motion-base)}
.header::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;pointer-events:none}
.header.scrolled{background:color-mix(in oklab,var(--ink),transparent 18%);backdrop-filter:saturate(150%) blur(20px);box-shadow:var(--sh-1)}
.header.scrolled::after{border-bottom-color:var(--line-strong)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-brand{display:flex;align-items:center;gap:11px}
.nav-brand svg{height:26px;width:auto}
.nav-brand .wm{font-family:var(--font-brand-display);font-weight:600;font-size:16px;letter-spacing:-.01em}
.nav-brand .wm b{color:var(--signal-hi);font-weight:600}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;color:var(--txt-2);font-weight:500;transition:color var(--motion-fast);padding:12px 0;display:inline-block}
.nav-links a:hover{color:var(--txt)}
.nav-cta{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;align-items:center;justify-content:center;background:none;border:none;color:var(--txt);cursor:pointer;
  width:44px;height:44px;border-radius:var(--radius-sm);transition:background var(--motion-fast)}
.menu-toggle:hover{background:var(--panel-2)}
.menu-toggle svg{width:24px;height:24px}
.menu-toggle .ico-close{display:none}
.menu-toggle[aria-expanded="true"] .ico-open{display:none}
.menu-toggle[aria-expanded="true"] .ico-close{display:block}

/* alternador de tema. Continua visível no mobile — o .btn-ghost ao lado
   desaparece em 640px, este não: escolher o tema é preferência de
   leitura, não ação secundária. O ícone mostrado é o DESTINO (sol = vai
   clarear), convenção que se lê sem pensar. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  background:none;border:1px solid var(--line-strong);border-radius:50%;color:var(--txt-2);cursor:pointer;
  transition:color var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}
.theme-toggle:hover{color:var(--txt);border-color:var(--signal-hi);background:var(--signal-tint)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .ico-moon{display:none}
[data-theme="light"] .theme-toggle .ico-sun{display:none}
[data-theme="light"] .theme-toggle .ico-moon{display:block}

/* ─── hero ─── */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 30%,transparent 78%)}
.hero-glow{position:absolute;top:-140px;right:-80px;width:620px;height:620px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in oklab,var(--signal),transparent 74%),transparent 66%);filter:blur(24px)}
/* vinheta: escurece as bordas para o brilho ficar contido no centro
   e o grid não terminar em corte seco */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 118% 82% at 56% 26%,transparent 42%,var(--ink) 100%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;margin:22px 0 20px;max-width:14ch}
.hero h1 .hl{color:var(--signal-hi)}
.hero-sub{font-size:clamp(17px,2vw,20px);color:var(--txt-2);max-width:46ch;line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero-trust .t{display:flex;flex-direction:column;gap:3px}
.hero-trust .t .n{font-family:var(--font-brand-mono);font-size:26px;font-weight:600;color:var(--txt)}
.hero-trust .t .l{font-size:12px;color:var(--txt-mut);font-family:var(--font-brand-mono);letter-spacing:.08em;text-transform:uppercase}

/* live panel */
.live-panel{border-radius:var(--radius-lg);padding:22px;box-shadow:var(--sh-3),var(--rim)}
.lp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.lp-title{font-family:var(--font-brand-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-mut)}
.lp-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-brand-mono);font-size:11px;color:var(--green-hi);letter-spacing:.06em;text-transform:uppercase}
.lp-live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in oklab,var(--green),transparent 76%);animation:pulse 1.8s infinite}
@media (prefers-reduced-motion:reduce){.lp-live .dot{animation:none}}
.spark-wrap{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;margin-bottom:16px}
.spark-wrap svg{width:100%;height:110px;overflow:visible}
.spark-label{position:absolute;top:12px;left:14px;font-family:var(--font-brand-mono);font-size:11px;color:var(--txt-mut);letter-spacing:.08em}
.spark-read{position:absolute;top:12px;right:14px;font-family:var(--font-brand-mono);font-size:13px;color:var(--cyan);font-weight:600}
.lp-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lp-metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px}
.lp-metric .k{font-family:var(--font-brand-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-mut);margin-bottom:6px}
.lp-metric .v{font-family:var(--font-brand-mono);font-size:22px;font-weight:600;color:var(--txt)}
.lp-metric .v.up{color:var(--green-hi)}
.lp-metric .v.sig{color:var(--signal-hi)}
.lp-foot{margin-top:12px;font-family:var(--font-brand-mono);font-size:11px;color:var(--txt-mut);letter-spacing:.02em}

/* ─── section shell ─── */
.section{padding:var(--section-y-desktop) 0;position:relative}
.section-head{max-width:640px;margin-bottom:52px}
.section-head h2{font-size:clamp(30px,4vw,46px);line-height:1.06;margin:16px 0 14px}
.section-head p{color:var(--txt-2);font-size:18px;line-height:1.5}

/* ─── Vidro + luz que segue o ponteiro ──────────────────────────────
   Duas peças trazidas do dashboard RyzeAPI. A superfície de vidro é
   branco translúcido sobre painel semitransparente, com blur real, o
   que só funciona porque cada seção carrega um brilho ambiente atrás
   (ver .amb) para o blur ter o que difratar.

   A luz do ponteiro vive no ::after e fica ATRÁS do conteúdo
   (z-index 0, filhos em 1): assim ela nunca reduz o contraste do
   texto — a regra que vale mesmo quando o efeito é bonito. Em
   prefers-reduced-motion ou ponteiro grosso (toque) o JS nem liga. */
.glass{
  background:
    linear-gradient(160deg,var(--glass-bg-2),var(--glass-bg) 44%,transparent),
    color-mix(in oklab,var(--panel),transparent 20%);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.glass-solid{
  background:
    linear-gradient(160deg,var(--glass-bg-2),transparent 55%),
    var(--panel);
  border:1px solid var(--glass-line)}

/* blur real fica reservado aos painéis grandes (5 elementos na página):
   backdrop-filter em 10+ cards de grid derruba o custo de composição
   sem ganho visual perceptível — os cards usam .glass-solid. */
:is(.live-panel,.mock,.contact-form){
  background:
    linear-gradient(160deg,var(--glass-bg-2),var(--glass-bg) 44%,transparent),
    color-mix(in oklab,var(--panel),transparent 20%);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
:is(.why-card,.svc-card,.trust-logo){
  background:
    linear-gradient(160deg,var(--glass-bg-2),transparent 55%),
    var(--panel);
  border:1px solid var(--glass-line)}
:is(.live-panel,.mock,.contact-form,.why-card,.svc-card,.trust-logo):hover{
  border-color:var(--glass-line-2)}

.spot,.live-panel,.mock,.contact-form,.why-card,.svc-card,.trust-logo{
  position:relative;isolation:isolate}
:is(.spot,.live-panel,.mock,.contact-form,.why-card,.svc-card,.trust-logo)>*{
  position:relative;z-index:1}
:is(.spot,.live-panel,.mock,.contact-form,.why-card,.svc-card,.trust-logo)::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:0;
  background:radial-gradient(var(--spot-size) circle at var(--mx,50%) var(--my,50%),
    var(--spot-tint),transparent 70%);
  transition:opacity var(--motion-base) var(--ease-standard)}
[data-lit="1"]::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  :is(.spot,.live-panel,.mock,.contact-form,.why-card,.svc-card,.trust-logo)::after{display:none}}

/* ─── Luz de borda ────────────────────────────────────────────────────
   Reprodução do .border-glow-card do Ryze. O ::after acima já dá o
   brilho difuso dentro do widget; esta camada é a outra metade do
   efeito: um filete de luz sobre a própria aresta, restrito ao trecho
   voltado para o ponteiro.

   O recorte sai de duas máscaras que se intersectam:
     · radial em var(--cx)/var(--cy) — localiza a luz no ponteiro;
     · cônica a partir de var(--ang) — mantém só o arco naquela
       direção, senão a borda oposta acenderia sempre que o ponteiro
       chegasse a menos de --edge-reach dela.

   O elemento é injetado pelo JS (é decoração de ponteiro fino, não
   conteúdo) e todas as sombras são inset: assim nada é cortado nos
   cards que usam overflow:hidden, e a luz nunca escapa do widget. */
:is(.spot,.live-panel,.mock,.contact-form,.why-card,.svc-card,.trust-logo)>.edge-light{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;opacity:0;mix-blend-mode:plus-lighter;
  -webkit-mask-image:
    radial-gradient(var(--edge-reach) circle at var(--cx,50%) var(--cy,50%),
      #000 0%,#000 38%,transparent 100%),
    conic-gradient(from var(--ang,0deg) at center,
      #000 3%,transparent 11%,transparent 89%,#000 97%);
  mask-image:
    radial-gradient(var(--edge-reach) circle at var(--cx,50%) var(--cy,50%),
      #000 0%,#000 38%,transparent 100%),
    conic-gradient(from var(--ang,0deg) at center,
      #000 3%,transparent 11%,transparent 89%,#000 97%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:opacity var(--motion-base) var(--ease-standard)}
.edge-light::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--edge-c),
    inset 0 0 2px 0 color-mix(in oklab,var(--edge-c),transparent 35%),
    inset 0 0 6px 0 color-mix(in oklab,var(--edge-c),transparent 58%),
    inset 0 0 16px 0 color-mix(in oklab,var(--edge-c),transparent 78%),
    inset 0 0 34px 2px color-mix(in oklab,var(--edge-c),transparent 88%)}
/* a opacidade é a própria proximidade, normalizada pelo limiar */
[data-lit="1"]>.edge-light{
  opacity:clamp(0,calc((var(--edge,0) - var(--edge-sens)) / (100 - var(--edge-sens))),1)}
@media (prefers-reduced-motion:reduce){.edge-light{display:none}}

/* realce de item interno — o hover:bg-white/5 do Ryze, usado nos
   widgets dentro dos painéis e nas linhas de tabela */
/* .hl saiu daqui: a única .hl da página é a palavra destacada do h1 do
   hero, que passava a receber fundo e borda no hover — um retângulo
   cinza aparecendo no meio do título. */
:is(.mock-kpi,.gauge,.mock-block,.mock-tbl tbody tr){
  transition:background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard)}
:is(.mock-kpi,.gauge,.mock-block,.mock-tbl tbody tr):hover{
  background:var(--glass-bg-2);border-color:var(--glass-line-2)}

/* brilho ambiente: substrato para o vidro. Sem isto, backdrop-filter
   sobre fundo liso não produz vidro nenhum, só uma borda clara. */
.amb{position:relative;isolation:isolate}
.amb>.amb-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb>.amb-glow::before,.amb>.amb-glow::after{content:"";position:absolute;
  width:52vw;height:52vw;max-width:760px;max-height:760px;border-radius:50%;
  filter:blur(90px);opacity:.5}
.amb>.amb-glow::before{top:-14%;left:-10%;
  background:radial-gradient(circle,color-mix(in oklab,var(--signal),transparent 74%),transparent 68%)}
.amb>.amb-glow::after{bottom:-18%;right:-12%;
  background:radial-gradient(circle,color-mix(in oklab,var(--cyan),transparent 86%),transparent 68%)}
.amb>*:not(.amb-glow){position:relative;z-index:1}
@media (max-width:640px){.amb>.amb-glow::before,.amb>.amb-glow::after{opacity:.32;filter:blur(64px)}}

/* why measure */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.why-card{border-radius:var(--radius-lg);padding:28px;overflow:hidden;
  box-shadow:var(--rim);
  transition:border-color var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard)}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--sh-1),var(--rim)}
@media (prefers-reduced-motion:reduce){.why-card:hover{transform:none}}
.why-idx{font-family:var(--font-brand-mono);font-size:12px;color:var(--signal-hi);margin-bottom:16px;letter-spacing:.08em}
.why-card h3{font-size:20px;margin-bottom:10px}
.why-card p{color:var(--txt-2);font-size:15px;line-height:1.55}
.why-card .metrics{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chip{font-family:var(--font-brand-mono);font-size:11px;color:var(--txt-2);background:var(--panel-3);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:5px 11px}

/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{overflow:hidden;border-radius:var(--radius-lg);padding:26px;
  box-shadow:var(--rim);
  transition:transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard)}
/* único floreio de hover da página: um filete de "sinal" acende no topo
   do card, coerente com a linha do sparkline do hero */
.svc-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--signal-hi),transparent);
  transition:opacity var(--motion-base) var(--ease-standard)}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2),var(--rim)}
.svc-card:hover::before{opacity:1}
@media (prefers-reduced-motion:reduce){.svc-card:hover{transform:none}}
.svc-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--signal-tint);border:1px solid color-mix(in oklab,var(--signal),transparent 62%);margin-bottom:18px;
  transition:background var(--motion-base) var(--ease-standard),border-color var(--motion-base) var(--ease-standard)}
.svc-card:hover .svc-icon{background:color-mix(in oklab,var(--signal),transparent 76%);border-color:color-mix(in oklab,var(--signal),transparent 42%)}
.svc-icon svg{width:22px;height:22px;stroke:var(--signal-hi);stroke-width:1.8;fill:none}
.svc-num{position:absolute;top:26px;right:26px;font-family:var(--font-brand-mono);font-size:11px;color:var(--txt-mut);letter-spacing:.08em}
.svc-card h3{font-size:19px;margin-bottom:10px}
.svc-card p{color:var(--txt-2);font-size:15px;line-height:1.55}

/* methodology */
.method{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--rim)}
.method-row{display:grid;grid-template-columns:64px 1fr 1.4fr;gap:20px;padding:24px 28px;border-bottom:1px solid var(--line);align-items:center;transition:background var(--motion-fast)}
.method-row:last-child{border-bottom:none}
.method-row:hover{background:var(--glass-bg-2)}
.method-step{font-family:var(--font-brand-mono);font-size:22px;font-weight:600;color:var(--signal-hi)}
.method-row h3{font-size:18px}
.method-row p{color:var(--txt-2);font-size:15px;line-height:1.5}
/* o texto sai do ciano e vira neutro: ciano fica reservado a séries e
   proveniência de dado. Sobra só o ponto como marcador de origem, o que
   tira 4 blocos de cor concorrentes desta tabela */
.method-status{font-family:var(--font-brand-mono);font-size:11px;color:var(--txt-mut);text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:7px;margin-top:6px}
.method-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none;
  box-shadow:0 0 0 3px color-mix(in oklab,var(--cyan),transparent 86%)}
.method-row:hover .method-status{color:var(--txt-2)}

/* about */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.about-photo{position:relative;border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel-2);aspect-ratio:4/5}
/* IMAGEM REAL: troque o src abaixo pela foto do Hudson Andrade (assets/hudson.jpg) */
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;color:var(--txt-2);text-align:center;padding:24px 24px 92px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 34%,color-mix(in oklab,var(--signal),transparent 82%),transparent 70%),
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(180deg,var(--panel-3),var(--panel));
  background-size:auto,34px 34px,34px 34px,auto}
.about-photo .ph svg{width:56px;height:56px;stroke:var(--signal-hi);stroke-width:1.3;fill:none}
.about-photo .ph .cap{font-family:var(--font-brand-mono);font-size:12px;color:var(--txt-mut);letter-spacing:.02em}
.about-photo .ph .cap b{display:block;color:var(--txt-2);font-weight:500;margin-bottom:4px}
.about-badge{position:absolute;left:14px;bottom:14px;right:14px;background:color-mix(in oklab,var(--ink),transparent 6%);backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--sh-1),var(--rim)}
.about-badge .nm{font-family:var(--font-brand-display);font-weight:600;font-size:16px}
.about-badge .rl{font-family:var(--font-brand-mono);font-size:11px;color:var(--signal-hi);letter-spacing:.08em}
.about-text h2{font-size:clamp(28px,4vw,42px);margin:14px 0 20px;line-height:1.08}
.about-text p{color:var(--txt-2);margin-bottom:16px;line-height:1.6}
.about-timeline{display:flex;flex-direction:column;gap:14px;margin:24px 0}
.tl-item{display:flex;gap:16px;align-items:baseline}
.tl-year{font-family:var(--font-brand-mono);font-size:13px;color:var(--signal-hi);min-width:56px;font-weight:600}
.tl-item span:last-child{color:var(--txt-2);font-size:15px}
.about-link{display:inline-flex;align-items:center;gap:8px;color:var(--signal-hi);font-weight:600;font-size:15px;margin-top:8px;
  border-bottom:1px solid color-mix(in oklab,var(--signal-hi),transparent 70%);padding-bottom:2px;
  transition:color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.about-link:hover{color:var(--txt);border-bottom-color:var(--txt)}
.about-link svg{width:17px;height:17px}
.about-social{display:flex;flex-wrap:wrap;gap:24px}
/* segundo perfil (Leonardo): foto à direita no desktop */
.about-grid--rev{grid-template-columns:1.15fr .85fr;margin-top:96px}
.about-grid--rev .about-photo{order:2}
.about-grid--rev .tl-year{min-width:84px}

/* testimonials: marquee de empresas que confiam */
.trust-marquee{position:relative;overflow:hidden;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trust-track{display:flex;gap:16px;width:max-content;animation:trustScroll 32s linear infinite}
.trust-marquee:hover .trust-track,.trust-marquee:focus-within .trust-track{animation-play-state:paused}
@keyframes trustScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.trust-track{animation:none;flex-wrap:wrap;width:auto}}
.trust-logo{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:20px 24px;min-width:220px;border-radius:var(--radius-lg);
  background:var(--panel-2);border:1px solid var(--line-strong);
  transition:border-color var(--motion-base) var(--ease-standard),background var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-standard)}
.trust-logo:hover{border-color:color-mix(in oklab,var(--signal),transparent 42%);background:color-mix(in oklab,var(--signal),transparent 88%);transform:translateY(-2px)}
.trust-logo .tl-name{font-family:var(--font-brand-display);font-weight:700;font-size:18px;line-height:1.2;color:var(--txt);white-space:nowrap}
.trust-logo .tl-site{font-family:var(--font-brand-mono);font-size:12px;color:var(--txt-mut);white-space:nowrap}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.contact-left h2{font-size:clamp(28px,4vw,44px);margin:16px 0 18px;line-height:1.06}
.contact-left p{color:var(--txt-2);font-size:18px;line-height:1.55;margin-bottom:28px}
.contact-methods{display:flex;flex-direction:column;gap:14px}
.cm{display:flex;align-items:center;gap:14px;padding:16px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--rim);
  transition:border-color var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard)}
.cm:hover{border-color:var(--glass-line-2);background:var(--glass-bg-2)}
.cm-icon{width:40px;height:40px;border-radius:10px;background:var(--signal-tint);border:1px solid color-mix(in oklab,var(--signal),transparent 70%);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cm-icon svg{width:20px;height:20px;stroke:var(--signal-hi);stroke-width:1.8;fill:none}
.cm .l{font-family:var(--font-brand-mono);font-size:11px;color:var(--txt-mut);text-transform:uppercase;letter-spacing:.05em}
.cm .v{font-size:15px;color:var(--txt);font-weight:500}
form.contact-form{border-radius:var(--radius-lg);padding:30px;box-shadow:var(--sh-2),var(--rim)}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:var(--font-brand-mono);font-size:12px;letter-spacing:.04em;color:var(--txt-2);margin-bottom:8px;text-transform:uppercase}
.fld input,.fld textarea{width:100%;background:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:13px 15px;color:var(--txt);font-family:var(--font-brand-body);font-size:15px;
  caret-color:var(--signal-hi);
  transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),background var(--motion-fast) var(--ease-standard)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--txt-mut)}
.fld input:hover,.fld textarea:hover{border-color:var(--txt-mut)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:none;border-color:var(--signal-hi);background:var(--panel);box-shadow:0 0 0 3px color-mix(in oklab,var(--signal),transparent 68%)}
/* sem isto o Chrome pinta o campo preenchido automaticamente de amarelo
   claro com texto preto e destrói o formulário escuro */
.fld input:-webkit-autofill,
.fld input:-webkit-autofill:hover,
.fld input:-webkit-autofill:focus,
.fld textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--txt);
  caret-color:var(--signal-hi);
  -webkit-box-shadow:0 0 0 1000px var(--ink) inset;
  box-shadow:0 0 0 1000px var(--ink) inset;
  transition:background-color 9999s ease-out 0s;
}
.fld textarea{resize:vertical;min-height:110px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-family:var(--font-brand-mono);font-size:11px;color:var(--txt-mut);margin-top:14px;line-height:1.5}

/* estado de erro por campo */
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--danger-hi)}
.fld .err{display:none;align-items:center;gap:6px;margin-top:7px;font-family:var(--font-brand-mono);font-size:11.5px;
  color:var(--danger-hi);line-height:1.45;letter-spacing:.01em}
.fld .err.show{display:flex}
.fld .err::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--danger-hi);flex-shrink:0}

/* mensagens de nível de formulário */
.form-msg{display:none;border-radius:var(--radius-sm);padding:13px 15px;font-size:14px;margin-bottom:18px;line-height:1.5}
.form-msg.show{display:block}
.form-ok{background:color-mix(in oklab,var(--green),transparent 90%);border:1px solid color-mix(in oklab,var(--green),transparent 58%);color:var(--green-hi)}
.form-err{background:color-mix(in oklab,var(--danger-hi),transparent 90%);border:1px solid color-mix(in oklab,var(--danger-hi),transparent 62%);color:var(--danger-hi)}

/* estado de carregamento */
.btn[aria-busy="true"],.btn:disabled{cursor:not-allowed;opacity:.72}
.btn[aria-busy="true"]:hover{transform:none;box-shadow:none;background:var(--signal)}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.6s}}

/* ─── telas do painel ─── */
.screens{display:flex;flex-direction:column;gap:88px}
.screen{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.screen.flip .screen-mock{order:-1}
.screen-path{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-brand-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-mut)}
.screen-path b{color:var(--signal-hi);font-weight:500}
.screen-copy h3{font-size:clamp(23px,2.8vw,31px);line-height:1.16;margin:14px 0 16px;max-width:24ch}
.screen-copy p{color:var(--txt-2);font-size:15.5px;line-height:1.6;margin-bottom:13px}
.screen-copy p:last-of-type{margin-bottom:0}
.screen-copy p em{font-style:normal;color:var(--txt)}
.screen-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}

    .mock{border-radius:var(--radius-lg);padding:18px;box-shadow:var(--sh-3),var(--rim);
  transition:border-color var(--motion-base) var(--ease-standard)}
.mock-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.mock-title{font-family:var(--font-brand-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-mut)}
    .mock-src{font-family:var(--font-brand-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan-hi);background:color-mix(in oklab,var(--cyan),transparent 92%);border:1px solid color-mix(in oklab,var(--cyan),transparent 74%);border-radius:var(--radius-pill);padding:3px 8px;white-space:nowrap}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
    /* flex-column + space-between: rótulos de 1 e de 2 linhas mantêm os
       valores alinhados na mesma base, sem altura fixa */
    .mock-kpi{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--radius-sm);padding:10px 11px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0}
.mock-kpi .k{font-family:var(--font-brand-mono);font-size:10px;line-height:1.35;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-mut)}
.mock-kpi .v{font-family:var(--font-brand-mono);font-size:16px;font-weight:600;color:var(--txt);line-height:1.1;font-variant-numeric:tabular-nums}
    /* margem uniforme em todos os blocos: o rodapé compensa com
       margin-top curta, então não depende de :last-of-type — que
       falhava quando o último bloco vinha dentro de .mock-tbls */
    .mock-block{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--radius-md);padding:12px;margin-bottom:8px}
.mock-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--font-brand-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-mut);margin-bottom:11px}
.mock-foot{margin-top:3px;font-family:var(--font-brand-mono);font-size:10.5px;line-height:1.5;color:var(--txt-mut)}

/* ─── medidores de retorno: ROAS e ROI ───
   Ambos derivam dos KPIs acima (receita ÷ investimento e retorno
   líquido ÷ investimento), então a fórmula fica visível no rodapé de
   cada card: o número não aparece sem dizer de onde veio. */
.mock-gauges{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.gauge{background:var(--glass-bg);border:1px solid var(--glass-line);border-radius:var(--radius-sm);padding:11px;min-width:0}
.gauge-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.gauge-k{font-family:var(--font-brand-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-mut)}
.gauge-v{font-family:var(--font-brand-mono);font-size:17px;font-weight:600;line-height:1;color:var(--green-hi);font-variant-numeric:tabular-nums}
.meter{position:relative;height:5px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--line),transparent 40%);overflow:hidden}
.meter i{position:absolute;top:0;bottom:0;left:0;width:calc(var(--v) / var(--max) * 100%);border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--green),var(--green-hi))}
.gauge-f{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin-top:8px;font-family:var(--font-brand-mono);font-size:10px;line-height:1.3;color:var(--txt-mut)}
.gauge-f .sc{white-space:nowrap}

/* tabela do mock */
.mock-tbls{display:grid;grid-template-columns:1.3fr .7fr;gap:8px}
.mock-tbls .mock-block{margin-bottom:0}
.mock-tbl{width:100%;border-collapse:collapse;font-family:var(--font-brand-mono);font-size:11px;font-variant-numeric:tabular-nums}
.mock-tbl caption{text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-mut);padding-bottom:9px;line-height:1.35}
.mock-tbl th{text-align:right;font-weight:500;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-mut);padding:0 0 7px;border-bottom:1px solid var(--line);white-space:nowrap}
.mock-tbl th:first-child,.mock-tbl td:first-child{text-align:left}
.mock-tbl td{text-align:right;color:var(--txt-2);padding:7px 0;border-bottom:1px solid color-mix(in oklab,var(--line),transparent 40%);white-space:nowrap}
.mock-tbl tr:last-child td{border-bottom:none}
.mock-tbl td:first-child{color:var(--txt)}
/* linha viva: o mesmo hover:bg-white/5 do dashboard, com respiro
   lateral negativo para o realce não colar no texto da coluna */
.mock-tbl tbody tr:hover td:first-child{color:var(--txt);box-shadow:inset 2px 0 0 var(--signal-hi)}
.mock-tbl td:first-child{padding-left:6px}
.mock-tbl th:first-child{padding-left:6px}
.mock-tbl .src{display:inline-flex;align-items:center;gap:6px}
.mock-tbl .src::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--line-strong);flex:none}
.mock-tbl .src.s-meta::before{background:var(--signal-hi)}
    .mock-tbl .src.s-google::before{background:var(--cyan-hi)}
    .mock-tbl .src.s-mail::before{background:var(--amber-hi)}

/* gráfico de barras — comprimentos calculados a partir de --v / --max */
.chart-legend{display:flex;gap:12px;font-family:var(--font-brand-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.chart-legend span{display:inline-flex;align-items:center;gap:5px}
    .chart-legend span::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--signal-hi);flex:none}
    .chart-legend .lg-google::before{background:var(--cyan-hi)}
.chart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;align-items:end;padding-top:15px}
.chart .col{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.chart .col-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:84px;width:100%}
.chart .bt{position:relative;flex:1;max-width:15px;height:100%;display:flex;align-items:flex-end;background:color-mix(in oklab,var(--line),transparent 55%);border-radius:3px}
    /* topo mais claro que a base: a barra ganha leitura de volume sem
       precisar de sombra, e o topo é o ponto que o olho compara */
    .chart .b{display:block;width:100%;height:calc(var(--v) / var(--max) * 100%);min-height:3px;border-radius:3px;
      background:linear-gradient(180deg,var(--signal-hi),var(--signal))}
    .chart .b.b-google{background:linear-gradient(180deg,var(--cyan-hi),var(--cyan))}
.chart.solo .bt{max-width:24px}
.chart .bv{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--v) / var(--max) * 100% + 5px);font-family:var(--font-brand-mono);font-size:10px;color:var(--txt-2);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.chart .col-x{font-family:var(--font-brand-mono);font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt-mut)}

/* footer */
.footer{border-top:1px solid var(--line-strong);padding:52px 0 34px;margin-top:40px}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;margin-bottom:40px}
.footer-brand-mark{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand-mark svg{height:24px}
.footer-brand-mark .wm{font-family:var(--font-brand-display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--txt)}
.footer-brand-mark .wm b{color:var(--signal-hi);font-weight:600}
.footer-brand p{color:var(--txt-mut);font-size:14px;max-width:34ch;line-height:1.5}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--txt-2);transition:color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.footer-social a:hover{color:var(--signal-hi);border-color:var(--signal-hi)}
.footer-social svg{width:17px;height:17px}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap}
.footer-col h3{font-family:var(--font-brand-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-mut);margin-bottom:12px}
.footer-col a{display:block;color:var(--txt-2);font-size:14px;padding:7px 0;transition:color var(--motion-fast)}
.footer-col a:hover{color:var(--txt)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);color:var(--txt-mut);font-size:13px}
.footer-bottom .mono{font-size:12px}

/* mobile nav panel */
.mobile-menu{display:none;position:fixed;inset:72px 0 0 0;z-index:99;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--ink);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-strong);padding:20px 24px 28px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:14px 0;font-size:17px;color:var(--txt-2);border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu .btn{display:flex;width:100%;margin-top:16px;text-align:center}

/* ─── responsive ─── */
/* trava: se o menu ficar aberto e a janela crescer, ele não pode sobrar */
@media (min-width:961px){.mobile-menu,.mobile-menu.open{display:none}}
@media (max-width:960px){
  .hero-inner,.about-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .about-grid--rev{margin-top:64px}
  .about-grid--rev .about-photo{order:0}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .section{padding:var(--section-y-tablet) 0}
  .nav-links{display:none}
  .menu-toggle{display:flex}
  .method-row{grid-template-columns:48px 1fr;gap:12px}
  .method-row p{grid-column:1/-1}
  .screens{gap:64px}
  .screen{grid-template-columns:1fr;gap:32px}
  .screen.flip .screen-mock{order:0}
}
@media (max-width:640px){
  .container{padding-inline:16px}
  .why-grid,.svc-grid,.form-row{grid-template-columns:1fr}
  .section{padding:var(--section-y-phone) 0}
  .hero{padding:120px 0 60px}
  .hero-trust{gap:18px 22px}
  .live-panel{padding:16px}
  .lp-metrics{gap:8px}
  .lp-metric{padding:10px 8px}
  .lp-metric .v{font-size:18px}
  .trust-logo{flex-basis:auto;min-width:88vw}
  .footer-cols{gap:32px}
  /* espaço apertado: o CTA do header cede lugar ao menu */
  .nav-cta .btn-ghost{display:none}
  .nav-brand .wm{font-size:15px}
  .footer-top{flex-direction:column}
  .about-text h2{font-size:28px}
  .mock{padding:13px}
  .mock-kpis{gap:6px}
  .mock-kpi{padding:9px 8px}
  .mock-kpi .k{letter-spacing:.04em}
  .mock-kpi .v{font-size:14px}
  .mock-gauges{grid-template-columns:1fr}
  .mock-block{padding:11px}
  .mock-tbls{grid-template-columns:1fr}
  .mock-tbl{font-size:10.5px}
  .chart{gap:5px}
  .chart .col-bars{height:72px;gap:3px}
  .mock-head{flex-wrap:wrap;gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════
 * TEMA CLARO — o que os tokens não resolvem
 * A maior parte da página vira tema claro só trocando as variáveis. O
 * que sobra aqui são os lugares onde o EFEITO em si depende do fundo
 * ser escuro: modos de mesclagem, sentidos de gradiente e a elevação
 * dos cards. Ficam no fim da folha, depois de tudo que precisam vencer.
 * ═══════════════════════════════════════════════════════════════════ */

/* 1. Luz de borda. plus-lighter é aditivo: sobre branco não há o que
      clarear e o filete desaparece. No claro ela pinta normal, com o
      roxo da marca, e passa a leitura de aresta tocada pela luz para
      aresta que ganha tinta. */
[data-theme="light"] .edge-light{mix-blend-mode:normal}
/* a soma de 5 sombras roxas fica pesada sobre branco: o mesmo desenho
   com metade da presença */
[data-theme="light"] [data-lit="1"]>.edge-light{
  opacity:clamp(0,calc(((var(--edge,0) - var(--edge-sens)) / (100 - var(--edge-sens))) * .62),1)}

/* 2. Elevação. No escuro o card se separa do fundo pela borda clara e o
      repouso não precisa de sombra. No claro, card branco sobre fundo
      quase branco só existe se tiver sombra desde o repouso — o hover
      então sobe um degrau em vez de criar a sombra do zero. */
[data-theme="light"] :is(.why-card,.svc-card,.trust-logo){box-shadow:var(--sh-1),var(--rim)}
[data-theme="light"] :is(.why-card,.svc-card,.trust-logo):hover{box-shadow:var(--sh-2),var(--rim)}
[data-theme="light"] :is(.live-panel,.mock,.contact-form){box-shadow:var(--sh-2),var(--rim)}

/* 3. Brilho ambiente. O substrato do vidro é calibrado para somar luz
      no escuro; no claro os mesmos blobs viram nuvens pastel. Menos
      opacidade mantém o blur com o que difratar sem sujar o branco. */
[data-theme="light"] .amb>.amb-glow::before,
[data-theme="light"] .amb>.amb-glow::after{opacity:.30}
[data-theme="light"] .hero-glow{opacity:.42}

/* 4. Gradientes de dado. As barras vão de -hi para a base; no claro a
      -hi é a mais ESCURA das duas, o que inverteria o sentido da luz.
      Aqui elas descem do tom cheio para o escuro, mantendo a base do
      gráfico mais densa que o topo, como no escuro. */
[data-theme="light"] .chart .b{background:linear-gradient(180deg,var(--signal),var(--signal-lo))}
[data-theme="light"] .chart .b.b-google{background:linear-gradient(180deg,var(--cyan),var(--cyan-hi))}
/* leitura do sparkline: --cyan puro rende 3.4:1 sobre branco, e isto é
   texto de 13px */
[data-theme="light"] .spark-read{color:var(--cyan-hi)}

/* 5. Logo. É monocromática roxa em dois tons e o mais claro (#7B74FF)
      rende 3.5:1 sobre branco — aceitável para marca, fraco para um
      símbolo que sustenta o topo da página. No claro os dois tons
      colapsam no roxo cheio da marca. */
[data-theme="light"] :is(.nav-brand,.footer-brand) svg path[fill="#7B74FF"]{fill:#635DFF}

/* 6. Barra de rolagem. O polegar é --panel-3, que no escuro é o tom
      mais claro da escada e no claro é o mais escuro — mas #e6e6ee
      sobre #f5f5f9 não se vê. Ele desce dois degraus além da escada. */
[data-theme="light"]{scrollbar-color:#c4c4d2 var(--ink)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:oklch(0.815 0.012 278)}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:oklch(0.720 0.016 278)}

/* 7. Estados do botão fantasma. No escuro cada estado clareia um
      degrau; no claro, --panel é branco, então o active sairia MAIS
      claro que o repouso e o botão pareceria soltar em vez de afundar. */
[data-theme="light"] .btn-ghost:active{background:var(--panel-3)}

/* 8. Superfícies internas. No escuro um bloco --panel dentro de um
      painel de vidro aparece porque é mais CLARO que o vidro em volta.
      No claro o painel já é branco e o bloco branco simplesmente
      desaparece — então caixa-dentro-de-caixa desce um degrau em vez de
      subir. O campo de formulário mantém o branco no foco: ali a
      inversão é o próprio sinal de "ativo". */
[data-theme="light"] :is(.spark-wrap,.lp-metric,.fld input,.fld textarea){background:var(--panel-2)}
[data-theme="light"] :is(.fld input,.fld textarea):focus-visible{background:var(--panel)}

/* ─── Páginas legais (Política de Privacidade / Termos) ─────────────── */
.legal-page{padding:calc(var(--section-y-desktop) + 64px) 0 var(--section-y-desktop)}
.legal-page .container{max-width:760px}
.legal-page h1{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:var(--tracking-display);margin:0 0 8px}
.legal-page .legal-updated{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--txt-mut);margin:0 0 48px}
.legal-page h2{font-family:var(--font-display);font-size:var(--text-lg);margin:40px 0 12px}
.legal-page p,.legal-page li{font-size:var(--text-base);line-height:var(--leading-body);color:var(--txt-2);margin:0 0 14px}
.legal-page ul{margin:0 0 14px;padding-left:20px}
.legal-page a{color:var(--accent)}

/* ─── Botão voltar ao topo ────────────────────────────────────────── */
.go-top{
  position:fixed;left:24px;bottom:24px;z-index:40;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--txt);
  cursor:pointer;box-shadow:var(--elev-raised,0 12px 32px rgba(0,0,0,0.28));
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity var(--motion-base) var(--ease-standard),transform var(--motion-base) var(--ease-standard),border-color var(--motion-fast);
}
.go-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.go-top:hover{border-color:var(--signal-hi);color:var(--signal-hi)}
.go-top svg{width:20px;height:20px}
@media (prefers-reduced-motion: reduce){.go-top{transition:opacity var(--motion-fast) linear}}

/* ─── Botão flutuante WhatsApp (cores da marca, sem verde) ──────────── */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:41;
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--signal-tint);
  border:1px solid color-mix(in oklab,var(--signal),transparent 62%);
  box-shadow:0 14px 34px color-mix(in oklab,var(--signal),transparent 55%),0 0 0 1px color-mix(in oklab,var(--signal-hi),transparent 70%) inset;
  transition:transform var(--motion-base) var(--ease-standard),box-shadow var(--motion-base) var(--ease-standard),background var(--motion-base) var(--ease-standard);
}
.wa-float:hover{transform:translateY(-3px);background:color-mix(in oklab,var(--signal),transparent 76%);box-shadow:0 18px 40px color-mix(in oklab,var(--signal),transparent 45%),0 0 0 1px var(--signal-hi) inset}
.wa-float #waLottie{width:40px;height:40px;display:none}
.wa-float .wa-fallback{width:28px;height:28px;color:var(--signal-hi);display:block}
.wa-float.wa-loaded #waLottie{display:block}
.wa-float.wa-loaded .wa-fallback{display:none}
@media (max-width:640px){.wa-float{right:16px;bottom:16px;width:54px;height:54px}.go-top{left:16px;bottom:16px}}