/* ============================================================================
   MAI — style.css
   Ordem: @font-face → tokens → reset/base → utilitários → componentes globais
          → seções (na ordem em que aparecem na página).
   Media queries ficam em responsive.css. Keyframes ficam em animations.css.
   Regra: nenhuma cor literal fora do bloco de tokens (exceção: SVG inline no
   HTML, onde o valor precisa ser literal).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · FONTES (self-hosted, subsets latin + latin-ext, variable)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../assets/fonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../assets/fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Superfícies */
  --canvas: #050816;
  --surface: #0b1220;
  --card: #111827;

  /* Conteúdo */
  --ink: #ffffff;
  --ink-muted: #cbd5e1;
  --ink-subtle: #7f8ca3;

  /* Acentos */
  --accent: #00d9ff;
  --accent-2: #4f8cff;
  --accent-ink: #04121a;   /* texto sobre fundo ciano */

  /* Sinal — usado só no bloco Problema e em estados de risco */
  --signal: #f5a524;
  --signal-hot: #f2555a;
  --positive: #34d399;

  /* Fios */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Tipografia */
  --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Movimento — uma só cadência para o site inteiro */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Raios */
  --r-card: 20px;
  --r-panel: 28px;

  /* Ritmo vertical de seção (sobrescrito em responsive.css) */
  --section-y: 6rem;

  /* Camadas */
  --z-nav: 50;
  --z-sheet: 60;
}

/* --------------------------------------------------------------------------
   3 · RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--line);
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* O Lenis assume o scroll; desligar o smooth nativo evita conflito. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  background-color: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
  font-weight: 700;
}

p { text-wrap: pretty; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

ul, ol { list-style: none; }

::selection {
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  color: #fff;
}

/* Anel de foco visível em tudo. Nunca remover. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 999px;
  border: 2px solid var(--canvas);
}
::-webkit-scrollbar-thumb:hover { background: #2c3b52; }

/* --------------------------------------------------------------------------
   4 · UTILITÁRIOS
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section {
  position: relative;
  padding-block: var(--section-y);
  scroll-margin-top: 6rem;
}

.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: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  left: 1rem; top: 1rem;
  z-index: 100;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Algarismos tabulares em todo dado, para não haver salto de layout. */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Fundos de profundidade */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.bg-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Gradientes de texto — só no hero e nos títulos de seção */
.text-glow {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #9fb4d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Card premium: fio + luz superior interna + elevação suave */
.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 40%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 24px 48px -24px rgba(0, 0, 0, 0.7);
}

.glass {
  background: rgba(11, 18, 32, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* Borda em gradiente via máscara — sem empilhar pseudo-elementos */
.grad-border { position: relative; }
.grad-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    140deg,
    color-mix(in oklab, var(--accent) 55%, transparent),
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0.02) 70%,
    color-mix(in oklab, var(--accent-2) 40%, transparent)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Máscaras de borda para marquees e trilhos longos */
.mask-x {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* --------------------------------------------------------------------------
   5 · ÍCONES
   Lucide: stroke, sem preenchimento, espessura 1.75 em toda a interface.
   -------------------------------------------------------------------------- */
.ic {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic--xs { width: 0.875rem; height: 0.875rem; }
.ic--sm { width: 1rem;     height: 1rem; }
.ic--md { width: 1.125rem; height: 1.125rem; }
.ic--lg { width: 1.25rem;  height: 1.25rem; }

/* --------------------------------------------------------------------------
   6 · LOGO
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  line-height: 1;
  font-size: 1.35rem;
}
.logo--sm { font-size: 1.25rem; }
.logo--lg { font-size: 1.5rem; }

.logo__word {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.055em;
  color: var(--ink);
  font-size: 1em;
}
.logo__dot { color: var(--accent); }
/* Largura explícita (0.82em × 46/34). Como item flex, um SVG com `width:auto`
   e sem atributos de tamanho entra no cálculo com base zero e acaba
   transbordando para fora da caixa do logo. */
.logo__mark {
  height: 0.82em;
  width: 1.1094em;
  flex: none;
}

/* --------------------------------------------------------------------------
   7 · BOTÕES
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;              /* 44px — mínimo de alvo de toque */
  padding-inline: 1.25rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn--lg {
  height: 3.25rem;
  padding-inline: 1.75rem;
  font-size: 1rem;
}

/* Um só CTA primário por tela. Ciano sobre quase-preto ≈ 11:1. */
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 8px 30px -8px rgba(0, 217, 255, 0.6);
}
.btn--primary:hover {
  background: #3ee4ff;
  box-shadow: 0 12px 40px -8px rgba(0, 217, 255, 0.8);
}

.btn--secondary {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
}
.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn--ghost { color: var(--ink-muted); }
.btn--ghost:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

/* Varredura de brilho no hover — só transform, nunca dispara layout */
.btn__sheen {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.btn:hover .btn__sheen { opacity: 1; }
.btn__sheen::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -33%;
  width: 33%;
  transform: skewX(-20deg);
  background: rgba(255, 255, 255, 0.25);
  filter: blur(12px);
}
.btn:hover .btn__sheen::after { animation: mai-sheen 0.9s var(--ease-out); }

.btn__arrow-r { transition: transform 0.2s var(--ease-out); }
.btn:hover .btn__arrow-r { transform: translateX(4px); }

.btn__arrow-ur { transition: transform 0.2s var(--ease-out); }
.btn:hover .btn__arrow-ur,
a:hover > .btn__arrow-ur { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   8 · CABEÇALHOS DE SEÇÃO
   -------------------------------------------------------------------------- */

/* Rótulo discreto: só tipo mono em maiúsculas, sem pílula e sem indicador. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  /* 24px de caixa de linha: mantém o mesmo espaço vertical do rótulo,
     independente de ele ser item flex ou estar em fluxo de bloco. */
  line-height: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-subtle);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 48rem;
}
.section-head--center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.section-head__title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
}
.section-head__lead {
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

.br-sm { display: none; }

/* ==========================================================================
   SEÇÃO 1 · NAV
   ========================================================================== */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);
}
.nav__bar {
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              backdrop-filter 0.3s var(--ease-out);
}
.nav.is-scrolled .nav__bar {
  border-bottom-color: var(--line);
  background: rgba(5, 8, 22, 0.8);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  height: 2.75rem;
  padding-inline: 0.5rem;
  margin-inline: -0.5rem;
  transition: opacity 0.2s var(--ease-out);
}
.nav__logo:hover { opacity: 0.8; }

.nav__links { display: none; align-items: center; gap: 0.125rem; }
.nav__links a {
  display: block;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
  transition: color 0.2s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }

.nav__actions { display: none; align-items: center; gap: 0.5rem; }
.nav__demo { display: none; }

.nav__toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.2s var(--ease-out);
}
.nav__toggle:hover { background: rgba(255, 255, 255, 0.06); }

/* Sheet mobile */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet[hidden] { display: none; }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 15, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0;
}
.sheet__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(88vw, 22rem);
  border-left: 1px solid var(--line);
  background: var(--surface);
  transform: translateX(100%);
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  padding-inline: 1.5rem;
}
.sheet__close {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background-color 0.2s var(--ease-out);
}
.sheet__close:hover { background: rgba(255, 255, 255, 0.06); }

.sheet__links {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  padding: 1rem;
}
.sheet__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  border-radius: 1rem;
  padding-inline: 1rem;
  font-size: 1.125rem;
  color: var(--ink-muted);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.sheet__links a:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
.sheet__links .ic { color: var(--ink-subtle); }

.sheet__foot {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding: 1.5rem;
}

/* ==========================================================================
   SEÇÃO 1 · HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
  padding-top: 8rem;
  padding-bottom: 5rem;
}

.hero__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid {
  position: absolute; inset: 0;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 25%, #000, transparent);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 25%, #000, transparent);
}
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(79, 140, 255, 0.22), transparent 70%);
}
.hero__aurora { position: absolute; border-radius: 50%; filter: blur(130px); }
.hero__aurora--a { left: -10rem; top: 2.5rem;  width: 34rem; height: 34rem; background: rgba(0, 217, 255, 0.10); }
.hero__aurora--b { right: -8rem; top: 33%;     width: 30rem; height: 30rem; background: rgba(79, 140, 255, 0.10); animation-delay: -8s; }
.hero__fade {
  position: absolute; inset-inline: 0; bottom: 0; height: 10rem;
  background: linear-gradient(to bottom, transparent, var(--canvas));
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: 3.5rem;
}

.hero__copy { max-width: 42rem; }

.hero__title {
  margin-top: 1.5rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.hero__lead {
  margin-top: 1.75rem;
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.hero__ctas .btn { width: 100%; }

.hero__assurances {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__assurances li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--ink-subtle);
}
.hero__assurances .ic { color: var(--accent); }

.hero__visual {
  position: relative;
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
}

/* ---- Console 3D ---- */
.console-wrap { position: relative; width: 100%; perspective: 1600px; }

.console-bloom { position: absolute; inset: -4rem; z-index: -1; pointer-events: none; }
.console-bloom span { position: absolute; border-radius: 50%; filter: blur(110px); }
.console-bloom__a { left: 25%; top: 25%;   width: 26rem; height: 26rem; background: rgba(0, 217, 255, 0.20); }
.console-bloom__b { right: 0;  bottom: 0;  width: 22rem; height: 22rem; background: rgba(79, 140, 255, 0.20); animation-delay: -6s; }

.console-3d {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.console {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  padding: 1rem;
}

.console__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
}
.console__brand { display: flex; align-items: center; gap: 0.625rem; }
.console__dot {
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--positive) 70%, transparent);
}
.console__label,
.console__live {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-subtle);
}
.console__live { display: none; text-transform: none; letter-spacing: normal; }

.console__grid { display: grid; gap: 1rem; }
.console__side { display: flex; flex-direction: column; gap: 1rem; }

/* Painéis internos do console */
.panel {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--canvas) 60%, transparent);
  padding: 1rem;
}
.panel__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-subtle);
}
.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.panel__value { font-size: 0.875rem; font-weight: 600; color: var(--positive); }

.pipeline { position: relative; border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in oklab, var(--canvas) 60%, transparent); padding: 1rem; }
.pipeline .panel__label { margin-bottom: 1rem; }
.pipeline__spine {
  position: absolute;
  left: 2.35rem; top: 3.4rem; bottom: 1.25rem;
  width: 1px;
  background: linear-gradient(to bottom, rgba(0, 217, 255, 0.6), rgba(0, 217, 255, 0.25), transparent);
}
.pipeline__pulse {
  position: absolute;
  left: 2.2rem; top: 3.4rem;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 3px rgba(0, 217, 255, 0.9);
  opacity: 0;
}
.pipeline__list { position: relative; display: flex; flex-direction: column; gap: 0.875rem; }
.pipeline__list li { display: flex; align-items: center; gap: 0.75rem; }
.pipeline__icon {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--card);
  color: var(--accent);
}
.pipeline__icon .ic { width: 15px; height: 15px; }
.pipeline__text { min-width: 0; }
.pipeline__name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pipeline__note {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.spark { height: 4rem; width: 100%; }
.panel--map { display: none; position: relative; overflow: hidden; }
.panel--map .panel__label { margin-bottom: 0.5rem; }
.routemap { height: 4.5rem; width: 100%; }

.insight-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 1rem;
  background: rgba(0, 217, 255, 0.06);
  padding: 0.875rem;
}
.insight-bar__icon {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  flex: none;
  border-radius: 0.5rem;
  background: rgba(0, 217, 255, 0.15);
  color: var(--accent);
}
.insight-bar__icon .ic { width: 15px; height: 15px; stroke-width: 2; }
.insight-bar p {
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.375;
  color: var(--ink-muted);
}
.insight-bar strong { font-weight: 500; color: var(--ink); }
.insight-bar__value { font-weight: 600; color: var(--accent); }

/* Chips flutuantes — ancorados fora das bordas, com folga para o drift */
.chip { position: absolute; opacity: 0; }
.chip--tr { top: -2.5rem; right: 1rem; transform: translateZ(90px); }
.chip--bl { bottom: -3rem; left: 1rem; transform: translateZ(130px); }

.chip__inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  padding: 0.625rem 0.875rem;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.chip__icon {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
}
.chip__icon--positive { background: rgba(52, 211, 153, 0.15); color: var(--positive); }
.chip__icon--signal   { background: rgba(245, 165, 36, 0.15); color: var(--signal); }
.chip__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
}
.chip__value { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink); }

/* ==========================================================================
   SEÇÃO 2 · INTEGRAÇÕES / PROVA
   ========================================================================== */
.logos {
  position: relative;
  border-block: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 40%, transparent);
  padding-block: 5rem;
}
.logos__title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-subtle);
}

.marquee {
  position: relative;
  margin-top: 2.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.75rem;
  will-change: transform;
}
.marquee__group { display: flex; align-items: center; gap: 0.75rem; }
.marquee__item {
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 60%, transparent);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-muted);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--line);
}
.stats__cell { background: var(--canvas); padding: 1.5rem; }
.stats__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.stats__prefix { font-size: 0.5em; font-weight: 600; color: var(--ink-subtle); }
.stats__label {
  margin-top: 0.75rem;
  max-width: 22ch;
  font-size: 0.875rem;
  line-height: 1.375;
  color: var(--ink-subtle);
}

/* ==========================================================================
   SEÇÃO 3 · PROBLEMA
   Único bloco do site em âmbar/rosa — a virada de temperatura conta a história.
   ========================================================================== */
.problem__underlight {
  position: absolute;
  inset-inline: 0; top: 0;
  z-index: -1;
  height: 36rem;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245, 165, 36, 0.07), transparent 70%);
}

.problem__grid {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

.problem__card { display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: border-color 0.3s var(--ease-out); }
.problem__card:hover { border-color: rgba(245, 165, 36, 0.25); }

.problem__art {
  position: relative;
  height: 10rem;
  flex: none;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--canvas) 40%, transparent);
  padding: 1.25rem 1.25rem 0;
}
.problem__art-bg { position: absolute; inset: 0; opacity: 0.4; }
.problem__art-inner {
  position: relative;
  height: 100%;
  transition: transform 0.5s var(--ease-out);
}
.problem__card:hover .problem__art-inner { transform: scale(1.03); }
.problem__art svg { height: 100%; width: 100%; }

.problem__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.problem__metric {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in oklab, var(--signal) 80%, transparent);
}
.problem__body h3 {
  margin-top: 0.625rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.375;
  color: var(--ink);
}
.problem__body p {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--ink-subtle);
}

.consequence {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1rem;
  border: 1px solid rgba(245, 165, 36, 0.2);
  border-radius: var(--r-card);
  background: rgba(245, 165, 36, 0.05);
  padding: 1.75rem;
}
.consequence__main { display: flex; align-items: flex-start; gap: 1rem; }
.consequence__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border-radius: 0.75rem;
  background: rgba(245, 165, 36, 0.15);
  color: var(--signal);
}
.consequence__icon .ic { stroke-width: 2; }
.consequence__kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--signal);
}
.consequence__text {
  margin-top: 0.375rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.375;
  color: var(--ink);
}
.consequence__aside { flex: none; font-size: 0.875rem; color: var(--ink-subtle); }

/* ==========================================================================
   SEÇÃO 4 · COMO FUNCIONA
   ========================================================================== */
.steps {
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
}
.steps__rail-wrap { position: relative; margin-top: 4rem; }

.steps__rail {
  position: absolute;
  left: 1.35rem; top: 0.5rem;
  width: 1px; height: calc(100% - 1rem);
  background: var(--line-strong);
}
.steps__fill {
  display: block;
  width: 100%; height: 0;
  background: linear-gradient(to bottom, var(--accent), var(--accent-2));
}

.steps__list { display: grid; gap: 2.5rem; }
.steps__item { position: relative; padding-left: 3.5rem; }

.steps__node {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--canvas);
}
.steps__num {
  display: grid;
  place-items: center;
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  background: rgba(0, 217, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--accent);
}

.steps__card { height: 100%; overflow: hidden; transition: transform 0.3s var(--ease-out); }
.steps__card:hover { transform: translateY(-4px); }

.steps__art {
  position: relative;
  height: 8rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--canvas) 40%, transparent);
  padding: 1rem;
}
.steps__art-bg { position: absolute; inset: 0; opacity: 0.3; }
.steps__art-inner { position: relative; height: 100%; transition: transform 0.5s var(--ease-out); }
.steps__card:hover .steps__art-inner { transform: scale(1.05); }
.steps__art svg { height: 100%; width: 100%; }

.steps__body { padding: 1.5rem; }
.steps__tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-subtle);
}
.steps__body h3 {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.375;
  color: var(--ink);
}
.steps__body p {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--ink-subtle);
}

/* ==========================================================================
   SEÇÃO 5 · MOTOR DE IA
   ========================================================================== */
.engine { isolation: isolate; overflow: hidden; }

.engine__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.engine__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(0, 217, 255, 0.09), transparent 70%);
}
.engine__rings {
  position: absolute;
  left: 50%; top: 50%;
  width: 52rem; height: 52rem;
  transform: translate(-50%, -50%);
  opacity: 0.18;
}

.engine__flow { position: relative; margin: 4rem auto 0; max-width: 64rem; }

.engine__conduit {
  position: absolute;
  left: 1.4rem; top: 0;
  width: 1px; height: 100%;
  background: var(--line-strong);
}
.engine__spine {
  display: block;
  width: 100%; height: 0;
  background: linear-gradient(to bottom, var(--accent), var(--accent), var(--accent-2));
  box-shadow: 0 0 16px 2px rgba(0, 217, 255, 0.45);
}

.engine__packets { position: absolute; left: 1.4rem; top: 0; width: 1px; height: 100%; pointer-events: none; }
.engine__packet {
  position: absolute;
  left: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 4px rgba(0, 217, 255, 0.85);
  opacity: 0;
}

.engine__list { display: flex; flex-direction: column; gap: 2rem; }

.engine__stage {
  position: relative;
  display: grid;
  align-items: center;
  column-gap: 2rem;
  padding-left: 3.5rem;
}

.engine__node {
  position: absolute;
  left: 0; top: 50%;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  transform: translateY(-50%);
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
}

.engine__card { position: relative; padding: 1.5rem; transition: border-color 0.3s var(--ease-out); }
.engine__card:hover { border-color: rgba(0, 217, 255, 0.25); }

.engine__chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in oklab, var(--accent) 80%, transparent);
}
.engine__chip-rule { width: 1rem; height: 1px; background: rgba(0, 217, 255, 0.4); }
.engine__card h3 { margin-top: 0.625rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.engine__card p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.625; color: var(--ink-subtle); }

.engine__stub { display: none; }

.engine__loop {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  padding-left: 3.5rem;
}
.engine__loop-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
}
.engine__loop-pill .ic { color: var(--accent); }
.engine__loop-pill p { font-size: 0.875rem; color: var(--ink-muted); }
.engine__loop-pill strong { font-weight: 500; color: var(--ink); }

/* ==========================================================================
   SEÇÃO 6 · PLATAFORMA
   ========================================================================== */
.platform { border-top: 1px solid var(--line); }

.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
.tabs__pill {
  position: absolute;
  left: 0; top: 0;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--accent);
  will-change: transform, width;
}
.tabs__btn {
  position: relative;
  z-index: 1;
  height: 2.75rem;
  border-radius: 999px;
  padding-inline: 1.25rem;
  font-size: 0.9375rem;
  color: var(--ink-muted);
  transition: color 0.2s var(--ease-out);
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn.is-active { color: var(--accent-ink); font-weight: 600; }

.app { position: relative; margin-top: 1.5rem; overflow: hidden; border-radius: var(--r-panel); }
.app__grid { display: grid; }

.app__sidebar {
  display: none;
  border-right: 1px solid var(--line);
  background: color-mix(in oklab, var(--canvas) 50%, transparent);
  padding: 1rem;
}
.app__brand { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 1.25rem; }
.app__brand-mark {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 0.5rem;
  background: rgba(0, 217, 255, 0.15);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--accent);
}
.app__brand-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
}
.app__nav { display: flex; flex-direction: column; gap: 0.125rem; }
.app__nav span {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--ink-subtle);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.app__nav span.is-active { background: rgba(0, 217, 255, 0.1); color: var(--accent); font-weight: 500; }

.app__models {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--card) 60%, transparent);
  padding: 0.75rem;
}
.app__models-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
}
.app__models-value { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.app__models-bar { margin-top: 0.5rem; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.app__models-bar span { display: block; height: 100%; width: 78%; border-radius: 999px; background: linear-gradient(to right, var(--accent), var(--accent-2)); }

.app__main { min-width: 0; }

.app__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding: 0.875rem 1rem;
}
.app__crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--ink-subtle);
}
.app__crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__crumb-current { font-weight: 500; color: var(--ink); }
.app__tools { display: flex; align-items: center; gap: 0.5rem; }
.app__search {
  display: none;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--canvas) 60%, transparent);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-subtle);
}
.app__bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-subtle);
}
.app__bell-dot {
  position: absolute;
  right: 0.375rem; top: 0.375rem;
  width: 0.375rem; height: 0.375rem;
  border-radius: 50%;
  background: var(--signal-hot);
}
.app__avatar {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: linear-gradient(to bottom right, var(--accent), var(--accent-2));
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent-ink);
}

.app__body { display: grid; gap: 1rem; padding: 1rem; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.kpi {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--canvas) 50%, transparent);
  padding: 1rem;
}
.kpi__label { font-size: 0.75rem; color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi__value {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi__delta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--positive);
}
.kpi__delta--down { color: var(--signal-hot); }
.kpi__delta span { font-weight: 400; color: var(--ink-subtle); }

.app__panels { display: grid; gap: 1rem; }
.app__side { display: flex; min-width: 0; flex-direction: column; gap: 1rem; }

.panel--chart { min-width: 0; }
.panel__head--wrap { flex-wrap: wrap; }
.panel__title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

.legend { display: flex; align-items: center; gap: 0.875rem; font-size: 0.6875rem; color: var(--ink-subtle); }
.legend li { display: flex; align-items: center; gap: 0.375rem; }
.legend__line { width: 1rem; height: 2px; border-radius: 999px; background: var(--accent); }
.legend__band { width: 1rem; height: 0.625rem; border-radius: 2px; background: rgba(0, 217, 255, 0.2); }

.chart { margin-top: 1rem; height: 11.5rem; width: 100%; }
.chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--ink-subtle);
}

.badge { border-radius: 999px; padding: 0.125rem 0.5rem; font-family: var(--font-mono); font-size: 0.625rem; }
.badge--hot { background: rgba(242, 85, 90, 0.15); color: var(--signal-hot); }

.alerts { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.875rem; }
.alerts li {
  display: flex;
  gap: 0.625rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--card) 50%, transparent);
  padding: 0.75rem;
}
/* O nível vem também no texto — nunca só pela cor. */
.alert__dot { margin-top: 0.375rem; width: 6px; height: 6px; flex: none; border-radius: 50%; }
.alert__dot--hot  { background: var(--signal-hot); }
.alert__dot--warn { background: var(--signal); }
.alert__dot--ok   { background: var(--positive); }
.alert__text { min-width: 0; }
.alert__title { display: block; font-size: 0.8125rem; line-height: 1.375; color: var(--ink); }
.alert__meta { display: block; margin-top: 0.125rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--ink-subtle); }

.insight {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: 1rem;
  background: rgba(0, 217, 255, 0.06);
  padding: 1rem;
}
.insight__head { display: flex; align-items: center; gap: 0.5rem; }
.insight__head .ic { color: var(--accent); stroke-width: 2; }
.insight__kicker {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.insight__title { margin-top: 0.625rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.375; color: var(--ink); }
.insight__body { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.625; color: var(--ink-subtle); }
.insight__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(0, 217, 255, 0.15);
}
.insight__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-subtle);
}
.insight__value { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--accent); }
.insight__apply { border-radius: 999px; background: var(--accent); padding: 0.375rem 0.875rem; font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); }

/* Desvanecimento inferior sugere que o app continua abaixo */
.app__fade {
  position: absolute;
  inset-inline: 0; bottom: 0;
  height: 4rem;
  background: linear-gradient(to top, var(--canvas), transparent);
  pointer-events: none;
}

/* ==========================================================================
   SEÇÃO 7 · BENEFÍCIOS
   ========================================================================== */
.benefits {
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
}
.benefits__grid { display: grid; gap: 1rem; margin-top: 3.5rem; }

.benefit {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 1.75rem;
  transition: border-color 0.3s var(--ease-out);
}
.benefit:hover { border-color: rgba(0, 217, 255, 0.25); }

/* Holofote seguindo o ponteiro — só opacidade, custo zero no scroll */
.benefit__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
  background: radial-gradient(320px circle at var(--mx, -999px) var(--my, -999px), rgba(0, 217, 255, 0.10), transparent 65%);
}
.benefit:hover .benefit__glow { opacity: 1; }

.benefit__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--canvas) 60%, transparent);
  color: var(--accent);
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.benefit:hover .benefit__icon {
  border-color: rgba(0, 217, 255, 0.3);
  background: rgba(0, 217, 255, 0.1);
}
.benefit h3 { position: relative; margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.benefit p { position: relative; margin-top: 0.625rem; max-width: 46ch; font-size: 0.9375rem; line-height: 1.625; color: var(--ink-subtle); }

.benefit__rule {
  position: absolute;
  inset-inline: 1.75rem; bottom: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(to right, var(--accent), transparent);
  transition: transform 0.5s var(--ease-out);
}
.benefit:hover .benefit__rule { transform: scaleX(1); }

/* ==========================================================================
   SEÇÃO 8 · DIFERENCIAIS
   ========================================================================== */
.diff__grid { display: grid; gap: 3rem; }

.diff__title { margin-top: 1.5rem; font-size: 2rem; font-weight: 800; line-height: 1.08; }
.diff__lead { margin-top: 1.25rem; max-width: 38ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-muted); }
.diff__cta { display: none; margin-top: 2rem; }
.diff__cta a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s var(--ease-out);
}
.diff__cta a:hover { color: var(--ink); }

.diff__list { display: flex; flex-direction: column; }
.diff__list li {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: 1.75rem;
}
.diff__list li:last-child { border-bottom: 1px solid var(--line); }

.diff__fill {
  position: absolute;
  inset-inline: 0;
  inset-block: 1px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(to right, rgba(0, 217, 255, 0.07), transparent);
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
.diff__list li:hover .diff__fill { transform: scaleX(1); }

.diff__row { display: flex; gap: 1.25rem; }
.diff__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75rem;
  color: var(--ink-subtle);
  transition: color 0.3s var(--ease-out);
}
.diff__list li:hover .diff__num { color: var(--accent); }
.diff__row h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.375;
  color: var(--ink);
  transition: transform 0.3s var(--ease-out);
}
.diff__list li:hover .diff__row h3 { transform: translateX(4px); }
.diff__row p { margin-top: 0.625rem; max-width: 58ch; font-size: 0.9375rem; line-height: 1.625; color: var(--ink-subtle); }

/* ==========================================================================
   SEÇÃO 9 · PÚBLICO
   ========================================================================== */
.audience {
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
}
.audience__grid { display: grid; gap: 1rem; margin-top: 3.5rem; }

.audience__card {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.audience__card:hover { transform: translateY(-4px); border-color: rgba(0, 217, 255, 0.25); }

.audience__art {
  position: relative;
  height: 9rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--canvas) 40%, transparent);
  padding: 1rem;
}
.audience__art-bg { position: absolute; inset: 0; opacity: 0.3; }
.audience__art-inner { position: relative; height: 100%; transition: transform 0.5s var(--ease-out); }
.audience__card:hover .audience__art-inner { transform: scale(1.05); }
.audience__art svg { height: 100%; width: 100%; }

.audience__body { padding: 1.5rem; }
.audience__body h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.audience__body p { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.625; color: var(--ink-subtle); }

.audience__note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: color-mix(in oklab, var(--card) 50%, transparent);
  padding: 1.75rem;
}
.audience__note-icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border-radius: 0.75rem;
  background: rgba(0, 217, 255, 0.1);
  color: var(--accent);
}
.audience__note p { font-size: 0.9375rem; line-height: 1.625; color: var(--ink-muted); }
.audience__note strong { font-weight: 600; color: var(--ink); }

/* ==========================================================================
   SEÇÃO 10 · VISÃO
   ========================================================================== */
.vision {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-top: 7rem;
  padding-bottom: 6rem;
}

/* Horizonte cinematográfico: fonte de luz nascendo abaixo da dobra */
.vision__horizon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.vision__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 115%, rgba(0, 217, 255, 0.20), transparent 65%);
}
.vision__line {
  position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 217, 255, 0.5), transparent);
}
.vision__grid {
  position: absolute; inset-inline: 0; bottom: 0; height: 16rem;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
}
.vision__bloom {
  position: absolute;
  bottom: -10rem; left: 50%;
  width: 40rem; height: 40rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(79, 140, 255, 0.1);
  filter: blur(140px);
}

.vision__inner { position: relative; }
.vision__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  max-width: 56rem;
  text-align: center;
}
.vision__title { margin-top: 1.75rem; font-size: 2.25rem; font-weight: 800; line-height: 1.06; }
.vision__lead { margin-top: 2rem; max-width: 62ch; font-size: 1.0625rem; line-height: 1.75; color: var(--ink-muted); }

.vision__rail-wrap { position: relative; margin: 4rem auto 0; max-width: 56rem; }
.vision__rail {
  position: absolute;
  inset-inline: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, var(--accent), rgba(79, 140, 255, 0.4), transparent);
}
.vision__pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 50%, transparent);
  backdrop-filter: blur(4px);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--ink-subtle);
}
.pill--live {
  border-color: rgba(0, 217, 255, 0.35);
  background: rgba(0, 217, 255, 0.1);
  font-weight: 500;
  color: var(--ink);
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.pill--live .pill__dot { background: var(--accent); }

.vision__legend {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-subtle);
}
.vision__legend-on { color: var(--accent); }

/* ==========================================================================
   SEÇÃO 11 · CTA FINAL
   ========================================================================== */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-block: 6rem;
  scroll-margin-top: 6rem;
}
.cta__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0, 217, 255, 0.16), transparent 65%);
}
.cta__grid {
  position: absolute; inset: 0;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000, transparent);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000, transparent);
}

.cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  max-width: 48rem;
  text-align: center;
}
.cta__title { margin-top: 1.75rem; font-size: 2.25rem; font-weight: 800; line-height: 1.06; }
.cta__lead { margin-top: 1.5rem; max-width: 54ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-muted); }

.cta__buttons {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.cta__contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin-top: 1.5rem;
}
.cta__contacts a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-subtle);
  transition: color 0.2s var(--ease-out);
}
.cta__contacts a:hover { color: var(--accent); }

.cta__steps { display: grid; gap: 1rem; margin: 4rem auto 0; max-width: 64rem; }
.cta__step { height: 100%; padding: 1.5rem; }
.cta__step-num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--accent); }
.cta__step h3 { margin-top: 0.75rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.cta__step p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--ink-subtle); }

/* ==========================================================================
   SEÇÃO 12 · FOOTER
   ========================================================================== */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 40%, transparent);
}
.footer__inner { padding-block: 4rem; }
.footer__top { display: grid; gap: 3rem; }

.footer__logo { display: inline-block; }
.footer__pitch { margin-top: 1.25rem; max-width: 36ch; font-size: 0.9375rem; line-height: 1.625; color: var(--ink-subtle); }

.footer__contact { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; font-size: 0.875rem; color: var(--ink-subtle); }
.footer__contact a,
.footer__contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  transition: color 0.2s var(--ease-out);
}
.footer__contact a:hover { color: var(--accent); }

.footer__social { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-subtle);
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.footer__social a:hover { border-color: rgba(0, 217, 255, 0.4); background: rgba(0, 217, 255, 0.1); color: var(--accent); }

.footer__map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.footer__map h3 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-subtle);
}
.footer__map ul { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1rem; }
.footer__map a { font-size: 0.875rem; color: var(--ink-muted); transition: color 0.2s var(--ease-out); }
.footer__map a:hover { color: var(--accent); }

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--ink-subtle);
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer__legal a { transition: color 0.2s var(--ease-out); }
.footer__legal a:hover { color: var(--accent); }

/* Assinatura de marca em escala grande, com fade inferior */
.footer__signoff { overflow: hidden; user-select: none; pointer-events: none; }
.footer__signoff p {
  margin-bottom: -0.75rem;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 15vw;
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.04);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}

/* ==========================================================================
   PÁGINAS INTERNAS (legais e 404)
   Layout de leitura: coluna estreita, medida de linha controlada, mesma
   paleta e tipografia da home.
   ========================================================================== */
.page {
  position: relative;
  isolation: isolate;
  padding-top: 9rem;
  padding-bottom: 6rem;
}
.page__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page__glow {
  position: absolute; inset-inline: 0; top: 0; height: 32rem;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(0, 217, 255, 0.10), transparent 70%);
}
.page__grid {
  position: absolute; inset-inline: 0; top: 0; height: 32rem;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.page__inner { max-width: 46rem; }

.page__title {
  margin-top: 1rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
}
.page__meta {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-subtle);
}

/* Bloco de texto corrido — a única parte do site com prosa longa. */
.prose {
  margin-top: 3rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-muted);
}
.prose > * + * { margin-top: 1.25rem; }

.prose h2 {
  margin-top: 3rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin-top: 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease-out);
}
.prose a:hover { color: var(--ink); }

.prose strong { font-weight: 600; color: var(--ink); }

.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { list-style: disc; margin-top: 0.5rem; }
.prose ol li { list-style: decimal; }
.prose li::marker { color: var(--ink-subtle); }

.prose hr {
  margin-top: 3rem;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Aviso destacado — usado no topo das páginas legais */
.notice {
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: var(--r-card);
  background: rgba(0, 217, 255, 0.06);
  padding: 1.25rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.625;
}

/* --- 404 --- */
.notfound {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.25rem 6rem;
}
.notfound__code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.notfound__title {
  margin-top: 1.5rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.08;
}
.notfound__lead {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
}
.notfound__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.notfound__links a { color: var(--ink-subtle); transition: color 0.2s var(--ease-out); }
.notfound__links a:hover { color: var(--accent); }