/* ═══════════════════════════════════════════════════════════════════
     * MS HOME v2 — CSS base alinhado com BrandBook v2.0
     * Paleta 4.3 · Tipografia 4.4 · Motion 5.3
     * ═══════════════════════════════════════════════════════════════════ */

    /* ── Variáveis BrandBook (4.3 + 4.4 + 4.5) ─────────────────────────── */
    :root {
      /* Paleta primária */
      --c-primary:        #0042BC;
      --c-primary-dark:   #003399;
      --c-primary-light:  #5B8DFF;
      --c-primary-deep:   #001E57;

      /* Neutros */
      --c-bg:             #08080F;   /* Preto profundo (sombra azul mínima) */
      --c-bg-deep:        #04040A;   /* Vácuo absoluto pra contraste */
      --c-bg-soft:        #0F172A;   /* Preto MS legacy — pra seções que precisam de respiro */
      --c-text:           #F8FAFC;   /* Off-white — texto principal */
      --c-text-soft:      rgba(255,255,255,0.72);
      --c-text-muted:     rgba(255,255,255,0.5);
      --c-border:         rgba(255,255,255,0.08);
      --c-border-strong:  rgba(255,255,255,0.14);
      --c-surface:        rgba(15,15,30,0.4);    /* Card glassmorphism */
      --c-surface-elev:   rgba(20,20,38,0.6);

      /* Glow / accent */
      --c-glow:           rgba(91,141,255,0.35);
      --c-glow-soft:      rgba(0,66,188,0.15);

      /* Tipografia */
      --f-display: 'Satoshi', system-ui, -apple-system, sans-serif;
      --f-mono:    'JetBrains Mono', ui-monospace, monospace;

      /* Espaçamento (BrandBook 4.5) */
      --container: 1200px;
      --section-py: clamp(80px, 12vw, 120px);
      --gutter: 24px;
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-xl: 28px;

      /* Motion (BrandBook 5.3) */
      --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
      --dur-fast: 150ms;
      --dur-base: 200ms;
      --dur-slow: 300ms;
      --dur-reveal: 600ms;
    }

    /* ── Reset moderno ───────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--f-display);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.7;
      color: var(--c-text);
      background: var(--c-bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }

    /* Selection */
    ::selection { background: var(--c-primary); color: #fff; }

    /* Reduced motion (BrandBook 5.3) */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── Tipografia (BrandBook 4.4) ─────────────────────────────────────── */
    .h-xl {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: clamp(40px, 5vw, 72px);
      line-height: 0.95;
      letter-spacing: -0.025em;
    }
    .h-lg {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: clamp(28px, 3vw, 48px);
      line-height: 1.05;
      letter-spacing: -0.02em;
    }
    .h-md {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: clamp(20px, 2vw, 28px);
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    .sub {
      font-family: var(--f-display);
      font-weight: 500;
      font-size: clamp(18px, 1.5vw, 22px);
      line-height: 1.5;
      color: var(--c-text-soft);
    }
    .body { font-size: 16px; line-height: 1.7; color: var(--c-text-soft); }
    .mono { font-family: var(--f-mono); font-weight: 500; font-size: 14px; }

    /* Eyebrow (BrandBook 4.7) */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #7ea8ff;
      background: rgba(0,66,188,0.12);
      border: 1px solid var(--c-glow);
      box-shadow: inset 0 0 20px rgba(0,66,188,0.15), 0 0 25px rgba(0,66,188,0.2);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    /* Accent gradient */
    .accent-gradient {
      background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-primary) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    /* ── Container ──────────────────────────────────────────────────────── */
    .container {
      width: 100%;
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    /* ── Botões (BrandBook 4.7 + NeonButton effect adaptado do 21st.dev) ── */
    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      border-radius: 999px; /* rounded-full estilo NeonButton */
      font-weight: 600;
      font-size: 15px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all var(--dur-base) var(--ease-premium);
      text-decoration: none;
      white-space: nowrap;
      overflow: visible;
    }

    /* NeonButton (adaptado fielmente de 21st.dev/cybergaz/neon-button) */
    /* 2 linhas finas horizontais fade-in no hover — sem rotação, com glow halo */

    /* Linha de cima (topo do botão) — opacity 100% no hover, com glow */
    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(91, 141, 255, 0.7) 25%,
        rgba(168, 197, 255, 1) 50%,
        rgba(91, 141, 255, 0.7) 75%,
        transparent 100%
      );
      filter:
        drop-shadow(0 0 4px var(--c-primary-light))
        drop-shadow(0 0 8px rgba(91, 141, 255, 0.55));
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      pointer-events: none;
    }

    /* Linha de baixo (abaixo da borda, -1px) — opacity 45% no hover, glow sutil */
    .btn::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(91, 141, 255, 0.7) 25%,
        rgba(168, 197, 255, 1) 50%,
        rgba(91, 141, 255, 0.7) 75%,
        transparent 100%
      );
      filter: drop-shadow(0 0 4px var(--c-primary-light));
      opacity: 0;
      transition: opacity 500ms ease-in-out;
      pointer-events: none;
    }

    .btn:hover::before { opacity: 1; }
    .btn:hover::after  { opacity: 0.45; }

    /* Variant: primário (sólido azul + neon hover) */
    .btn-primary {
      background: var(--c-primary);
      color: #fff;
      border-color: rgba(91,141,255,0.0);
      box-shadow: 0 10px 30px -10px rgba(0,66,188,0.5);
    }
    .btn-primary:hover {
      background: var(--c-primary-dark);
      border-color: rgba(91,141,255,0.4);
      transform: scale(1.03);
      box-shadow:
        0 14px 40px -10px rgba(0,66,188,0.7),
        0 0 30px rgba(91,141,255,0.25);
    }

    .btn svg { width: 16px; height: 16px; }

    /* ── Section base ───────────────────────────────────────────────────── */
    section {
      padding: var(--section-py) 0;
      position: relative;
    }
    .sec-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 64px;
    }
    .sec-head .eyebrow { margin-bottom: 24px; }
    .sec-head .h-lg { margin: 0 0 16px; }
    .sec-head .sub { margin: 0; }

    /* ── NAV sticky (BrandBook 4.7 — backdrop-blur) ─────────────────────── */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 22px 0;
      background: rgba(15,23,42,0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid transparent;
      transition: border-color var(--dur-slow) var(--ease-premium), background var(--dur-slow);
    }
    .nav.is-scrolled {
      background: rgba(15,23,42,0.92);
      border-bottom-color: var(--c-border);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }
    .nav-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 17px;
      letter-spacing: -0.01em;
    }
    .nav-brand img { height: 34px; width: auto; }
    .nav-links {
      display: flex;
      gap: 26px;
      list-style: none;
      margin: 0; padding: 0;
      font-size: 14px;
      font-weight: 500;
    }
    .nav-links a {
      color: var(--c-text-soft);
      transition: color var(--dur-fast) ease-out;
    }
    .nav-links a:hover { color: var(--c-text); }
    .nav-actions { display: flex; align-items: center; gap: 12px; }
    .nav-actions .btn { padding: 10px 20px; font-size: 14px; }
    /* Entrar: botão ghost/outline (borda + radius via tokens, hover suave) */
    .nav-login {
      color: var(--c-text-soft);
      font-size: 14px;
      font-weight: 500;
      padding: 10px 18px;
      border: 1px solid var(--c-border);
      border-radius: var(--radius-sm);
      transition: color var(--dur-fast) ease-out,
                  border-color var(--dur-fast) ease-out,
                  background var(--dur-fast) ease-out;
    }
    .nav-login:hover {
      color: var(--c-text);
      border-color: var(--c-border-strong);
      background: rgba(255, 255, 255, 0.05);
    }

    /* Mobile menu trigger */
    .nav-burger {
      display: none;
      background: transparent;
      border: 1px solid var(--c-border);
      color: var(--c-text);
      width: 44px; height: 44px;
      border-radius: var(--radius-sm);
      align-items: center; justify-content: center;
    }
    .nav-burger svg { width: 22px; height: 22px; }

    @media (max-width: 880px) {
      .nav-links, .nav-actions { display: none; }
      .nav-burger { display: inline-flex; }
    }

    /* Faixa intermediária (881-1024px): com 4 âncoras (item 4 + Integrações) e
       labels longos em ES (Integraciones/Cómo funciona/Diferenciales), a base de
       14px quebrava pra 2 linhas nessa faixa. Trim de gaps/padding + fonte a 13px
       (piso legível) pra caber em 1 linha. Não afeta ≤880px (burger) nem >1024px. */
    @media (min-width: 881px) and (max-width: 1024px) {
      .nav-inner   { gap: 14px; }
      .nav-links   { gap: 14px; font-size: 13px; }
      .nav-actions { gap: 8px; }
      .nav-actions .btn { padding: 9px 13px; font-size: 13px; }
      .nav-login   { padding: 9px 13px; font-size: 13px; }
      .lang-trigger { padding: 7px 8px; }
    }

    /* Spacer pra compensar nav fixa */
    .nav-spacer { height: 96px; }

    /* Âncoras do nav (spec 527, item 4): compensa a nav fixa pra o topo da
       seção não ficar escondido sob a barra ao rolar via link de âncora.
       Valores derivados do .nav-spacer (96/72) + respiro. */
    #integracoes, #produto, #pilares, #faq { scroll-margin-top: 110px; }
    @media (max-width: 880px) {
      #integracoes, #produto, #pilares, #faq { scroll-margin-top: 84px; }
    }

    /* Botão flutuante voltar ao topo (spec 527, item 5). Escondido por padrão,
       aparece via .is-visible (home.js, scrollY > 600). z-index abaixo da nav
       (nav = 100). Cor/estilo via tokens, sem cor nova. */
    .back-to-top {
      position: fixed;
      right: 24px;
      bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      z-index: 90;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-sm);
      color: var(--c-text-soft);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity var(--dur-fast) ease-out,
                  visibility var(--dur-fast) ease-out,
                  transform var(--dur-fast) var(--ease-premium),
                  color var(--dur-fast) ease-out,
                  border-color var(--dur-fast) ease-out,
                  background var(--dur-fast) ease-out;
    }
    .back-to-top.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    .back-to-top:hover {
      color: var(--c-text);
      border-color: var(--c-border-strong);
      background: rgba(15, 23, 42, 0.92);
    }
    .back-to-top:focus-visible {
      outline: 2px solid rgba(91, 141, 255, 0.5);
      outline-offset: 4px;
    }
    .back-to-top svg { width: 20px; height: 20px; }
    @media (prefers-reduced-motion: reduce) {
      .back-to-top { transition: none; transform: none; }
    }

    /* ═══════════════════════════════════════════════════════════════════
     * [02] HERO: gradiente estático + grid + parallax leve por scroll
     * ═══════════════════════════════════════════════════════════════════ */
    #hero {
      position: relative;
      padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 10vw, 110px);
      overflow: hidden;
      isolation: isolate;
      min-height: calc(82vh - 96px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Gradiente estático de fundo (base do hero; parallax leve via home.js) */
    .hero-beams-fallback {
      position: absolute;
      inset: -10% -10%;
      z-index: -3;
      pointer-events: none;
      filter: blur(80px);
      opacity: 0.4;
      background:
        radial-gradient(40% 50% at 20% 35%, rgba(0,66,188,0.5), transparent 60%),
        radial-gradient(35% 40% at 80% 75%, rgba(91,141,255,0.35), transparent 65%),
        radial-gradient(45% 55% at 50% 100%, rgba(0,30,87,0.45), transparent 70%);
    }

    /* Grid pattern — concentrado no miolo, dissolvendo agressivamente nas bordas */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 45% 35% at center, #000 0%, rgba(0,0,0,0.5) 50%, transparent 90%);
      -webkit-mask-image: radial-gradient(ellipse 45% 35% at center, #000 0%, rgba(0,0,0,0.5) 50%, transparent 90%);
    }

    /* Container do conteúdo (tudo centered, respiro generoso) */
    .hero-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
      padding: 0 var(--gutter);
    }
    .hero-content .eyebrow { margin-bottom: 32px; }

    /* Headline épica */
    .hero-headline {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: clamp(40px, 7vw, 88px);
      line-height: 0.94;
      letter-spacing: -0.04em;
      margin: 0 0 32px;
      color: var(--c-text);
    }
    .hero-headline-2 {
      display: block;
      background: linear-gradient(135deg,
        var(--c-primary-light) 0%,
        #a8c5ff 45%,
        var(--c-primary) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      letter-spacing: -0.04em;
    }

    /* Subhead */
    .hero-sub-c {
      font-family: var(--f-display);
      font-weight: 500;
      font-size: clamp(16px, 1.4vw, 19px);
      line-height: 1.55;
      color: var(--c-text-soft);
      max-width: 700px;
      margin: 0 auto 40px;
    }
    .hero-sub-c strong { color: var(--c-text); font-weight: 600; }

    /* CTAs centralizados */
    .hero-cta-c {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 28px;
    }
    .hero-cta-c .btn-primary { padding: 18px 34px; font-size: 16px; }

    /* ── HERO SHOT - imagem real do produto (MockupAgencia "Atlas Mídia") ── */
    .hero-shot {
      margin: 60px auto 0;
      max-width: 880px;
      width: 100%;
    }
    .hero-shot img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 16px;
      transform: perspective(1800px) rotateX(4deg) rotateY(-8deg) scale(.98);
      transform-origin: top center;
      box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
      -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
      mask-image: linear-gradient(to bottom, #000 78%, transparent);
    }
    @media (max-width: 720px) {
      .hero-shot {
        margin-top: 36px;
        max-height: 300px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
        mask-image: linear-gradient(to bottom, #000 70%, transparent);
      }
      .hero-shot img {
        transform: none;
        border-radius: 12px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-shot img { transform: none; }
    }

    /* Reduced motion: parallax não roda (home.js), mostra só o gradiente estático */
    @media (prefers-reduced-motion: reduce) {
      .hero-beams-fallback { opacity: 0.5; }
    }

    /* Mobile */
    @media (max-width: 720px) {
      #hero { min-height: auto; padding: 80px 0 80px; }
      .hero-content { padding: 0 16px; }
      .hero-headline { font-size: clamp(32px, 8.5vw, 52px); }
    }

    /* ═══════════════════════════════════════════════════════════════════
     * [03] INTEGRAÇÕES — Dock effect (afinada e clean, sem wave)
     * ═══════════════════════════════════════════════════════════════════ */
    #integracoes {
      padding: clamp(32px, 4vw, 52px) 0;
      border-top: 1px solid var(--c-border);
      border-bottom: 1px solid var(--c-border);
      background: rgba(255, 255, 255, 0.012);
      position: relative;
      overflow: hidden;
    }

    /* Glow radial discreto (profundidade) */
    #integracoes::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 60%;
      height: 140px;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at center, rgba(0,66,188,0.08), transparent 70%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
    }


    .integ-inner {
      position: relative;
      z-index: 1;
    }

    .integ-label {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--c-text-muted);
      margin: 0 0 24px;
    }

    /* Dock list — flex centralizada, alinhada embaixo pra crescer pra cima */
    .dock {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 0;
      min-height: 70px;
    }

    .dock-item {
      --base: 68px;
      position: relative;
      width: var(--base);
      height: var(--base);
      margin: 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(12px);
      transition:
        width 280ms cubic-bezier(0.25, 1, 0.5, 1),
        height 280ms cubic-bezier(0.25, 1, 0.5, 1),
        margin 280ms cubic-bezier(0.25, 1, 0.5, 1),
        opacity 280ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Visual base do item (logo/wordmark dentro) */
    .dock-item-inner {
      width: 100%;
      height: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid var(--c-border);
      background: rgba(255, 255, 255, 0.025);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: border-color 280ms, background 280ms;
    }
    .dock-item:hover .dock-item-inner {
      border-color: rgba(91, 141, 255, 0.4);
      background: rgba(91, 141, 255, 0.08);
    }
    .dock-item-inner img {
      width: 58%;
      height: 58%;
      object-fit: contain;
      filter: brightness(1.1);
    }
    /* Logos locais coloridas (Pagar.me, Z-API) — tom monocromático off-white
       igual aos ícones via Simple Icons. brightness(0) → preto puro;
       invert(1) → branco puro; brightness(0.97) → off-white (~#F8FAFC).
       Wordmarks têm proporção retangular (~3:1) → mais largura, menos altura,
       object-fit contain mantém aspect ratio. */
    .dock-item-inner img.logo-mono {
      width: 95%;
      height: 72%;
      filter: brightness(0) invert(1) brightness(0.97);
    }
    .dock-item-inner .dock-wordmark {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: 17px; /* tamanho base; será escalado via transform no hover dock */
      letter-spacing: -0.02em;
      color: var(--c-text);
      line-height: 1;
      white-space: nowrap;
      transition: font-size 280ms cubic-bezier(0.25, 1, 0.5, 1);
    }
    /* Wordmarks escalam junto com o dock effect (acompanha a lupa) */
    .dock-item:hover .dock-wordmark { font-size: 25px; }
    .dock-item:hover + .dock-item .dock-wordmark,
    .dock-item:has(+ .dock-item:hover) .dock-wordmark { font-size: 22px; }
    .dock-item:hover + .dock-item + .dock-item .dock-wordmark,
    .dock-item:has(+ .dock-item + .dock-item:hover) .dock-wordmark { font-size: 20px; }

    .dock-item-inner .dock-wordmark sub {
      font-size: 0.6em;
      font-weight: 600;
      margin-left: 1px;
      vertical-align: baseline;
      color: var(--c-primary-light);
      opacity: 0.9;
    }

    /* Tooltip com nome (aparece no hover) */
    .dock-tooltip {
      position: absolute;
      bottom: calc(100% + 14px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      padding: 6px 12px;
      background: rgba(15, 23, 42, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--c-border-strong);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--c-text);
      letter-spacing: 0.02em;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms cubic-bezier(0.25, 1, 0.5, 1), transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
    }
    .dock-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border: 5px solid transparent;
      border-top-color: rgba(15, 23, 42, 0.92);
    }
    .dock-item:hover .dock-tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Reveal staggered (entrada quando a seção aparece no viewport) */
    #integracoes.in-view .dock-item {
      animation: dock-reveal 700ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    #integracoes.in-view .dock-item:nth-child(1) { animation-delay: 0ms; }
    #integracoes.in-view .dock-item:nth-child(2) { animation-delay: 90ms; }
    #integracoes.in-view .dock-item:nth-child(3) { animation-delay: 180ms; }
    #integracoes.in-view .dock-item:nth-child(4) { animation-delay: 270ms; }
    #integracoes.in-view .dock-item:nth-child(5) { animation-delay: 360ms; }
    #integracoes.in-view .dock-item:nth-child(6) { animation-delay: 450ms; }

    @keyframes dock-reveal {
      to {
        opacity: 0.5;
        transform: translateY(0);
      }
    }

    /* DOCK EFFECT — efeito lupa (CSS-only via adjacent + :has) */
    /* Hover no item: 1.5x + sobe */
    .dock-item:hover {
      width: calc(var(--base) * 1.5);
      height: calc(var(--base) * 1.5);
      margin-top: calc(var(--base) * -0.5);
      opacity: 1;
    }
    /* Adjacent +1 (depois do hovered): 1.33x */
    .dock-item:hover + .dock-item {
      width: calc(var(--base) * 1.33);
      height: calc(var(--base) * 1.33);
      margin-top: calc(var(--base) * -0.33);
      opacity: 0.85;
    }
    /* Adjacent +2: 1.17x */
    .dock-item:hover + .dock-item + .dock-item {
      width: calc(var(--base) * 1.17);
      height: calc(var(--base) * 1.17);
      margin-top: calc(var(--base) * -0.17);
      opacity: 0.7;
    }
    /* Anterior -1 (antes do hovered): 1.33x */
    .dock-item:has(+ .dock-item:hover) {
      width: calc(var(--base) * 1.33);
      height: calc(var(--base) * 1.33);
      margin-top: calc(var(--base) * -0.33);
      opacity: 0.85;
    }
    /* Anterior -2: 1.17x */
    .dock-item:has(+ .dock-item + .dock-item:hover) {
      width: calc(var(--base) * 1.17);
      height: calc(var(--base) * 1.17);
      margin-top: calc(var(--base) * -0.17);
      opacity: 0.7;
    }

    /* Reduced motion: sem animações, logos visíveis estáticas */
    @media (prefers-reduced-motion: reduce) {
      .dock-item {
        opacity: 0.6;
        transform: none;
        animation: none !important;
      }
      .dock-item:hover { transform: none; }
    }

    @media (max-width: 720px) {
      .dock-item { --base: 42px; margin: 0 8px; }
      .dock-item:hover { margin-top: calc(var(--base) * -0.35); }
      .dock-tooltip { font-size: 10px; padding: 4px 8px; }
    }

    /* ═══════════════════════════════════════════════════════════════════
     * [04] PROBLEMA × SOLUÇÃO — 2 colunas glassmorphism com divider animado
     * ═══════════════════════════════════════════════════════════════════ */
    #problema {
      padding: clamp(80px, 11vw, 140px) 0 clamp(48px, 6vw, 80px);
      position: relative;
      overflow: hidden;
    }
    .problema-head {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 64px;
    }
    .problema-head .eyebrow { margin-bottom: 24px; }
    .problema-head .h-lg { margin: 0 0 24px; }
    .problema-head .sub { margin: 0; max-width: 680px; margin-left: auto; margin-right: auto; }

    /* ── "A real": Split-Card - caos (Você) | disco-seta | controle (O Sistema) ── */
    .problema-stories {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 1000px;
      margin: 0 auto;
    }

    /* Card base = vidro coerente com .pilar-card */
    .problema-story {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 44%) 56px minmax(0, 1fr);
      align-items: stretch;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-lg);
      backdrop-filter: blur(12px);
      overflow: hidden;
      opacity: 0;
      transform: translateY(8px);
      transition: border-color var(--dur-slow) var(--ease-premium),
                  box-shadow var(--dur-slow) var(--ease-premium);
    }
    #problema.in-view .problema-story {
      animation: problema-reveal 600ms var(--ease-premium) forwards;
    }
    #problema.in-view .problema-story:nth-child(1) { animation-delay: 100ms; }
    #problema.in-view .problema-story:nth-child(2) { animation-delay: 200ms; }
    #problema.in-view .problema-story:nth-child(3) { animation-delay: 300ms; }
    #problema.in-view .problema-story:nth-child(4) { animation-delay: 400ms; }
    #problema.in-view .problema-story:nth-child(5) { animation-delay: 500ms; }
    @keyframes problema-reveal {
      to { opacity: 1; transform: translateY(0); }
    }
    @media (hover: hover) {
      .problema-story:hover {
        border-color: var(--c-border-strong);
        box-shadow: 0 24px 60px -24px rgba(0, 66, 188, 0.35);
      }
      .problema-story:hover .real-disc { box-shadow: 0 0 24px var(--c-glow); }
      .problema-story:hover .real-disc svg {
        transform: translateX(3px);
        transition: transform 250ms var(--ease-premium);
      }
    }

    /* Zonas: caos (território morto) e controle (território vivo, glow azul) */
    .real-caos, .real-controle {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 22px;
      z-index: 1;
    }
    .real-caos { background: rgba(8, 8, 15, 0.5); }
    .real-controle::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(120% 120% at 85% 50%, var(--c-glow-soft), transparent 70%);
      pointer-events: none;
      z-index: -1;
    }

    /* Icon-boxes */
    .real-icon {
      flex-shrink: 0;
      width: 38px; height: 38px;
      border-radius: var(--radius-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .real-icon svg { width: 20px; height: 20px; }
    .real-icon--caos {
      background: rgba(239, 68, 68, 0.08);
      border: 1px solid rgba(239, 68, 68, 0.22);
      color: #f87171;
    }
    .real-icon--sis {
      background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
      color: #fff;
      box-shadow: 0 6px 18px -6px var(--c-glow);
    }

    /* Corpo: label + texto + big-number */
    .real-body {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .real-label {
      font-family: var(--f-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .real-label--caos { color: var(--c-text-muted); }
    .real-label--sis  { color: #7ea8ff; }
    .real-caos .real-text {
      font-size: 14.5px;
      line-height: 1.4;
      color: var(--c-text-soft);
    }
    .real-controle .real-text {
      font-size: 14px;
      line-height: 1.4;
      color: var(--c-text-soft);
    }
    .real-big {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: clamp(20px, 2vw, 24px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: #fff;
      font-variant-numeric: tabular-nums;
      margin: 1px 0;
    }

    /* Disco-seta central (a virada) */
    .real-switch {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .real-switch::before {
      content: "";
      position: absolute;
      top: 0; bottom: 0; left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, transparent, var(--c-primary-light), transparent);
      opacity: 0.45;
    }
    .real-disc {
      position: relative;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--c-surface-elev);
      border: 1px solid var(--c-glow);
      box-shadow: 0 0 16px var(--c-glow);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--c-primary-light);
    }
    .real-disc svg { width: 18px; height: 18px; }

    /* Card 5 - clímax full-width centralizado */
    .problema-story--climax {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: clamp(32px, 4vw, 48px) 24px;
      border-color: var(--c-border-strong);
    }
    .problema-story--climax::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(80% 130% at 50% 0%, var(--c-glow-soft), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .problema-story--climax > * { position: relative; z-index: 1; }
    .real-climax-eyebrow { margin: 0 0 18px; }
    .real-icon--climax {
      width: 52px; height: 52px;
      margin-bottom: 16px;
    }
    .real-icon--climax svg { width: 28px; height: 28px; }
    .real-climax-pre {
      font-size: 13px;
      color: var(--c-text-muted);
      text-decoration: line-through;
      text-decoration-color: rgba(239, 68, 68, 0.5);
      margin-bottom: 10px;
    }
    .real-climax-title {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: clamp(26px, 3.6vw, 40px);
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin: 0 0 12px;
      color: var(--c-text);
      max-width: 16ch;
    }
    .real-climax-anchor {
      font-family: var(--f-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--c-primary-light);
    }

    /* Mobile: 3 zonas empilham no mesmo card; disco-seta gira pra baixo */
    @media (max-width: 720px) {
      .problema-story {
        grid-template-columns: 1fr;
        backdrop-filter: blur(8px);
      }
      .real-caos, .real-controle { padding: 18px; }
      .real-switch { height: 40px; }
      .real-switch::before {
        top: 50%; bottom: auto; left: 0; right: 0;
        width: auto; height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, var(--c-primary-light), transparent);
      }
      .real-disc svg { transform: rotate(90deg); }
      .problema-story--climax { padding: 32px 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .problema-story { opacity: 1; transform: none; animation: none !important; }
    }

    /* ═══════════════════════════════════════════════════════════════════
     * [05] PRODUTO EM AÇÃO — Scroll storyteller estilo Apple
     * Adaptado de 21st.dev/ContainerScroll pra vanilla CSS + JS
     * 3 cenas: ChatIA → Kanban → DashboardCliente
     * ═══════════════════════════════════════════════════════════════════ */
    #produto {
      padding: clamp(48px, 6vw, 80px) 0 0;
      position: relative;
    }
    .produto-head {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 60px;
      padding: 0 var(--gutter);
    }
    .produto-head .eyebrow { margin-bottom: 24px; }
    .produto-head .h-lg { margin: 0 0 20px; }
    .produto-head .sub { margin: 0; max-width: 640px; margin: 0 auto; }

    /* ── VEJA POR DENTRO - layout empilhado (scroll-driven 3D removido) ── */
    .produto-scroll-wrapper {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 var(--gutter);
    }
    .produto-sticky {
      position: static;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    /* Wrappers viram transparentes: títulos e cenas viram irmãos flex e empilham via 'order' */
    .produto-narrativa-fixa { display: contents; }
    .produto-narrativa-item {
      max-width: 720px;
      width: 100%;
      padding: 0 var(--gutter);
      text-align: center;
      margin: 0 0 20px;
    }
    .produto-narrativa-item:nth-child(1) { order: 1; }
    .produto-narrativa-item:nth-child(2) { order: 3; }
    .produto-narrativa-item:nth-child(3) { order: 5; }
    .produto-narrativa-item .step {
      display: inline-block;
      font-family: var(--f-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--c-primary-light);
      background: rgba(0, 66, 188, 0.18);
      border: 1px solid rgba(91, 141, 255, 0.35);
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 10px;
    }
    .produto-narrativa-item h3 {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: clamp(20px, 2vw, 26px);
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: var(--c-text);
      margin: 0 0 4px;
    }
    .produto-narrativa-item p {
      font-size: 14px;
      color: var(--c-text-soft);
      margin: 0;
      line-height: 1.4;
    }

    /* Wrappers do frame viram transparentes pro empilhamento */
    .produto-frame-perspective,
    .produto-frame,
    .produto-browser,
    .produto-stage { display: contents; }
    .produto-browser-chrome { display: none; }

    /* Cenas - painéis arredondados, um sobre o outro */
    .produto-cena {
      position: relative;
      width: 100%;
      max-width: 1000px;
      height: 540px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--c-border-strong);
      box-shadow: 0 30px 70px -30px rgba(0, 30, 87, 0.5), 0 16px 40px -20px rgba(0, 0, 0, 0.6);
      margin: 0 0 72px;
    }
    .produto-cena[data-cena="1"] { order: 2; }
    .produto-cena[data-cena="2"] { order: 4; }
    .produto-cena[data-cena="3"] { order: 6; margin-bottom: 0; }

    /* ═══════ CENA 1 — ChatIA (replica MockupChatIA.tsx) ═══════ */
    .cena-chatia {
      display: grid;
      grid-template-columns: 4fr 8fr;
      height: 100%;
      background: #0a0a0a;
      font-size: 11px;
    }
    .chatia-sidebar {
      border-right: 1px solid rgba(255,255,255,0.05);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .chatia-sidebar-head {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .chatia-sidebar-title {
      font-weight: 700;
      color: #fff;
      font-size: 11px;
    }
    .chatia-badge-naolidas {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(16,185,129,0.12);
      border: 1px solid rgba(16,185,129,0.3);
      font-size: 9px;
      font-weight: 600;
      color: #6ee7b7;
    }
    .chatia-badge-naolidas::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #4ade80;
    }
    .chatia-search {
      padding: 8px 12px 4px;
    }
    .chatia-search-inner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      font-size: 10px;
      color: rgba(255,255,255,0.3);
    }
    .chatia-conversas {
      flex: 1;
      overflow: hidden;
    }
    .chatia-conversa {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .chatia-conversa.ativo {
      background: rgba(0,66,188,0.12);
    }
    .chatia-conversa-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #475569, #1e293b);
      flex-shrink: 0;
    }
    .chatia-conversa.ativo .chatia-conversa-avatar {
      background: linear-gradient(135deg, #f97316, #ea580c);
    }
    .chatia-conversa-info { flex: 1; min-width: 0; }
    .chatia-conversa-nome {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .chatia-conversa-nome-text {
      font-size: 10.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .chatia-conversa.ativo .chatia-conversa-nome-text { color: #fff; }
    .chatia-conversa-ia-tag {
      font-size: 7px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 3px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: rgba(139,92,246,0.2);
      color: #c4b5fd;
    }
    .chatia-conversa-preview {
      font-size: 9.5px;
      color: rgba(255,255,255,0.4);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 1px;
    }
    .chatia-conversa-badge {
      width: 16px; height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 700;
      color: #fff;
      background: #0042bc;
      flex-shrink: 0;
    }

    .chatia-main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    .chatia-main-head {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .chatia-main-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #f97316, #ea580c);
    }
    .chatia-main-info { flex: 1; }
    .chatia-main-nome {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }
    .chatia-main-status {
      font-size: 10px;
      color: #4ade80;
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 2px;
    }
    .chatia-main-status::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #4ade80;
      animation: chatia-pulse 1.4s ease-in-out infinite;
    }
    @keyframes chatia-pulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

    .chatia-msgs {
      flex: 1 1 0;
      min-height: 0;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 10px;
      background: radial-gradient(circle at 30% 20%, rgba(0,66,188,0.05), transparent 50%), #0a0a0a;
      overflow: hidden;
    }
    .chatia-day-break {
      align-self: center;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding: 2px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.4);
    }
    .chatia-msg-in {
      align-self: flex-start;
      max-width: 75%;
      padding: 8px 12px;
      border-radius: 14px 14px 14px 4px;
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.8);
      font-size: 11px;
      line-height: 1.4;
    }
    .chatia-msg-out {
      align-self: flex-end;
      max-width: 75%;
      padding: 8px 12px;
      border-radius: 14px 14px 4px 14px;
      background: rgba(0,66,188,0.4);
      border: 1px solid rgba(0,66,188,0.4);
      color: #fff;
      font-size: 11px;
      line-height: 1.4;
    }
    .chatia-msg-ia-tag {
      align-self: flex-end;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(139,92,246,0.15);
      border: 1px solid rgba(139,92,246,0.3);
      color: #c4b5fd;
      margin-top: -4px;
    }
    .chatia-pill-transfer {
      align-self: center;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(139,92,246,0.1);
      border: 1px solid rgba(139,92,246,0.3);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #c4b5fd;
    }

    /* Sofia em ação — loop animado (typing dots + resposta cyclando) */
    .chatia-typing-dot {
      display: inline-block;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: currentColor;
      margin: 0 1.5px;
      animation: chatia-typing-bounce 1.2s ease-in-out infinite;
    }
    .chatia-typing-dot:nth-child(2) { animation-delay: 0.15s; }
    .chatia-typing-dot:nth-child(3) { animation-delay: 0.30s; }
    @keyframes chatia-typing-bounce {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
      30% { transform: translateY(-3px); opacity: 1; }
    }

    .chatia-msg-loop-in {
      align-self: flex-start;
      max-width: 75%;
      padding: 8px 12px;
      border-radius: 14px 14px 14px 4px;
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.8);
      font-size: 11px;
      line-height: 1.4;
      opacity: 0;
      animation: chatia-loop-msg-in 9s ease-out infinite;
    }
    .chatia-msg-loop-typing {
      align-self: flex-end;
      padding: 9px 14px;
      border-radius: 14px 14px 4px 14px;
      background: rgba(0,66,188,0.35);
      border: 1px solid rgba(0,66,188,0.4);
      color: #7ea8ff;
      line-height: 1;
      opacity: 0;
      animation: chatia-loop-typing 9s ease-out infinite;
    }
    .chatia-msg-loop-out {
      align-self: flex-end;
      max-width: 75%;
      padding: 8px 12px;
      border-radius: 14px 14px 4px 14px;
      background: rgba(0,66,188,0.4);
      border: 1px solid rgba(0,66,188,0.4);
      color: #fff;
      font-size: 11px;
      line-height: 1.4;
      opacity: 0;
      animation: chatia-loop-msg-out 9s ease-out infinite;
    }

    /* Loop 9s — sequência: Carolina msg → Sofia typing → Sofia resp → reset */
    @keyframes chatia-loop-msg-in {
      0%, 3%   { opacity: 0; transform: translateY(8px); }
      8%, 88%  { opacity: 1; transform: translateY(0); }
      95%,100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes chatia-loop-typing {
      0%, 22%  { opacity: 0; transform: translateY(8px); }
      28%, 48% { opacity: 1; transform: translateY(0); }
      54%, 100%{ opacity: 0; transform: translateY(-4px); }
    }
    @keyframes chatia-loop-msg-out {
      0%, 52%  { opacity: 0; transform: translateY(8px); }
      58%, 88% { opacity: 1; transform: translateY(0); }
      95%,100% { opacity: 0; transform: translateY(-4px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .chatia-msg-loop-in, .chatia-msg-loop-typing, .chatia-msg-loop-out {
        animation: none; opacity: 1; transform: none;
      }
      .chatia-typing-dot { animation: none; opacity: 0.7; }
    }

    .chatia-input {
      padding: 10px 14px;
      border-top: 1px solid rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .chatia-input-box {
      flex: 1;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.05);
      font-size: 11px;
      color: rgba(255,255,255,0.4);
    }
    .chatia-input-send {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border: none;
    }

    /* Mobile: simplificar — esconde sidebar pra caber */
    @media (max-width: 720px) {
      .cena-chatia { grid-template-columns: 1fr; }
      .chatia-sidebar { display: none; }
      .produto-frame-perspective { padding: 0 16px; }
    }

    /* ═══════ CENA 2 — Kanban (replica MockupKanban.tsx) ═══════ */
    .cena-kanban {
      display: flex;
      flex-direction: column;
      height: 100%;
      background: #0a0a0a;
      font-size: 11px;
    }
    .kanban-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      flex-shrink: 0;
    }
    .kanban-toolbar-left { display: flex; align-items: center; gap: 12px; }
    .kanban-toolbar-title {
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.01em;
    }
    .kanban-toolbar-count {
      font-size: 10px;
      color: rgba(255,255,255,0.5);
      padding: 2px 8px;
      background: rgba(255,255,255,0.05);
      border-radius: 6px;
    }
    .kanban-toolbar-right { display: flex; align-items: center; gap: 8px; }
    .kanban-toolbar-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.2;
    }
    .kanban-toolbar-btn.search {
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.4);
    }
    .kanban-toolbar-btn.filter {
      background: rgba(0,66,188,0.15);
      border: 1px solid rgba(0,66,188,0.4);
      color: #5b8dff;
    }
    .kanban-toolbar-btn.primary {
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      color: #fff;
      font-weight: 700;
    }

    .kanban-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: rgba(255,255,255,0.04);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      flex-shrink: 0;
    }
    .kanban-stat {
      padding: 10px 16px;
      background: #0a0a0a;
    }
    .kanban-stat-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 2px;
    }
    .kanban-stat-value {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      line-height: 1.1;
    }
    .kanban-stat-value.danger { color: #f87171; }
    .kanban-stat-value.highlight { color: #4ade80; }

    .kanban-cols {
      flex: 1;
      overflow: hidden;
      display: flex;
      gap: 12px;
      padding: 16px;
    }
    .kanban-col {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .kanban-col-head {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .kanban-col-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }
    .kanban-col-title {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.7);
    }
    .kanban-col-count {
      font-size: 10px;
      color: rgba(255,255,255,0.3);
    }

    .kanban-cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .kanban-card {
      padding: 10px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 8px;
    }
    .kanban-card.parado {
      border-color: rgba(239,68,68,0.55);
    }
    .kanban-card.ganho {
      background: rgba(16,185,129,0.08);
      border-color: rgba(16,185,129,0.3);
    }
    .kanban-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .kanban-card-name {
      font-size: 11px;
      font-weight: 600;
      color: #fff;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .kanban-card-empresa {
      font-size: 9px;
      color: rgba(255,255,255,0.45);
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .kanban-card-star {
      color: #fbbf24;
      font-size: 12px;
      line-height: 1;
      flex-shrink: 0;
    }
    .kanban-card-tags {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .kanban-card-tag {
      font-size: 8px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 3px;
      background: rgba(0,66,188,0.18);
      color: #9bb8ff;
    }
    .kanban-card-tag.parado-tag {
      background: rgba(239,68,68,0.18);
      color: #f87171;
      border: 1px solid rgba(239,68,68,0.35);
      font-weight: 700;
    }
    .kanban-card-tag.ia-tag {
      background: rgba(139,92,246,0.20);
      color: #c4b5fd;
      border: 1px solid rgba(139,92,246,0.30);
      font-weight: 700;
    }
    .kanban-card-tag.semdono-tag {
      background: rgba(148,163,184,0.15);
      color: #cbd5e1;
      border: 1px solid rgba(148,163,184,0.25);
    }
    .kanban-card-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .kanban-card-score {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .kanban-card-score-label {
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.4);
    }
    .kanban-card-score-bar {
      width: 40px;
      height: 4px;
      background: rgba(255,255,255,0.08);
      border-radius: 999px;
      overflow: hidden;
    }
    .kanban-card-score-fill { height: 100%; border-radius: 999px; }
    .kanban-card-score-fill.high { background: #10b981; }
    .kanban-card-score-fill.mid  { background: #f59e0b; }
    .kanban-card-score-fill.low  { background: #6b7280; }
    .kanban-card-score-text {
      font-size: 9px;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
    }
    .kanban-card-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      color: rgba(255,255,255,0.3);
      font-size: 9px;
    }
    .kanban-card-actions .ico-wa { color: rgba(74,222,128,0.6); }

    /* Mobile: simplifica kanban */
    @media (max-width: 720px) {
      .kanban-stats { grid-template-columns: repeat(2, 1fr); }
      .kanban-cols { gap: 6px; padding: 10px; }
      .kanban-col-title { font-size: 9px; }
    }

    /* ═══════ CENA 3 — Dashboard Cliente (LIGHT MODE white-label) ═══════ */
    .cena-dashboard {
      display: flex;
      flex-direction: column;
      height: 100%;
      background: #f7f8fb;
      color: #1f2937;
      font-size: 11px;
    }
    .dash-header {
      padding: 14px 24px;
      background: #0042bc;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .dash-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .dash-header-logo {
      width: 38px; height: 38px;
      border-radius: 8px;
      background: #fff;
      color: #0042bc;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      letter-spacing: -0.02em;
    }
    .dash-header-cliente {
      font-size: 9.5px;
      font-weight: 500;
      opacity: 0.85;
      letter-spacing: 0.05em;
    }
    .dash-header-titulo {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-top: 1px;
    }
    .dash-header-atualizado {
      font-size: 10px;
      opacity: 0.8;
    }

    .dash-body {
      flex: 1;
      padding: 14px 24px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .dash-section-label {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #6b7280;
      margin-bottom: 6px;
    }

    /* KPIs hero (R$ destaque) — 2 cards grandes no topo */
    .dash-kpis-hero {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 10px;
      margin-bottom: 8px;
    }
    .dash-kpi-hero {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      position: relative;
      overflow: hidden;
    }
    .dash-kpi-hero.primary {
      background: linear-gradient(135deg, #0042bc 0%, #0033a0 100%);
      color: #fff;
      border-color: transparent;
    }
    .dash-kpi-hero.primary::before {
      content: '';
      position: absolute;
      top: -50%; right: -20%;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(91,141,255,0.3) 0%, transparent 70%);
      pointer-events: none;
    }
    .dash-kpi-hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
      position: relative;
    }
    .dash-kpi-hero-label {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      opacity: 0.85;
    }
    .dash-kpi-hero.primary .dash-kpi-hero-label { color: rgba(255,255,255,0.85); }
    .dash-kpi-hero-delta {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(16,185,129,0.15);
      color: #059669;
    }
    .dash-kpi-hero.primary .dash-kpi-hero-delta {
      background: rgba(255,255,255,0.20);
      color: #fff;
    }
    .dash-kpi-hero-value {
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      color: #111827;
      position: relative;
    }
    .dash-kpi-hero.primary .dash-kpi-hero-value { color: #fff; }
    .dash-kpi-hero-value .currency {
      font-size: 16px;
      font-weight: 600;
      opacity: 0.7;
      margin-right: 4px;
    }
    .dash-kpi-hero-foot {
      font-size: 10px;
      margin-top: 4px;
      opacity: 0.75;
      position: relative;
    }
    .dash-kpi-hero.primary .dash-kpi-hero-foot { color: rgba(255,255,255,0.85); }

    .dash-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .dash-kpi {
      background: #fff;
      border: 1px solid #f0f1f5;
      border-radius: 10px;
      padding: 10px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .dash-kpi-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .dash-kpi-icon {
      width: 18px; height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #0042bc;
      font-size: 14px;
    }
    .dash-kpi-delta {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(16,185,129,0.12);
      color: #059669;
    }
    .dash-kpi-label {
      font-size: 9.5px;
      color: #6b7280;
      font-weight: 500;
      margin-bottom: 1px;
    }
    .dash-kpi-value {
      font-size: 19px;
      font-weight: 800;
      color: #111827;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }

    .dash-chart-wrap { display: flex; flex-direction: column; gap: 6px; }
    .dash-chart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .dash-chart-legenda {
      display: flex;
      gap: 12px;
      font-size: 9px;
      color: #6b7280;
    }
    .dash-chart-legenda-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .dash-chart-dot {
      width: 8px; height: 8px;
      border-radius: 2px;
      display: inline-block;
    }
    .dash-chart {
      background: #fff;
      border: 1px solid #f0f1f5;
      border-radius: 10px;
      padding: 12px 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .dash-chart-bars {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 90px;
    }
    .dash-chart-bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      height: 100%;
    }
    .dash-chart-bars-stack {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 2px;
      flex: 1;
    }
    .dash-chart-bar {
      width: 100%;
      max-width: 18px;
      border-radius: 2px 2px 0 0;
    }
    .dash-chart-bar.leads { background: #0042bc; }
    .dash-chart-bar.conv  { background: #d1d5db; }
    .dash-chart-mes {
      font-size: 8.5px;
      font-weight: 600;
      color: #9ca3af;
      font-variant-numeric: tabular-nums;
    }

    .dash-bottom-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 8px;
    }
    .dash-tempo {
      background: #fff;
      border: 1px solid #f0f1f5;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .dash-cpl {
      background: #fff;
      border: 1px solid #f0f1f5;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .dash-cpl-icon {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: rgba(16,185,129,0.10);
      color: #059669;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .dash-cpl-info { flex: 1; min-width: 0; }
    .dash-cpl-label {
      font-size: 9.5px;
      color: #6b7280;
      font-weight: 500;
      margin-bottom: 2px;
    }
    .dash-cpl-value {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }
    .dash-cpl-numero {
      font-size: 18px;
      font-weight: 800;
      color: #111827;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
    }
    .dash-cpl-numero .currency {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.6;
      margin-right: 2px;
    }
    .dash-cpl-diff {
      font-size: 10px;
      font-weight: 700;
      color: #059669;
    }
    .dash-tempo-icon {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: rgba(0,66,188,0.10);
      color: #0042bc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .dash-tempo-info { flex: 1; }
    .dash-tempo-label {
      font-size: 9.5px;
      color: #6b7280;
      font-weight: 500;
      margin-bottom: 2px;
    }
    .dash-tempo-value {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .dash-tempo-numero {
      font-size: 20px;
      font-weight: 800;
      color: #111827;
      letter-spacing: -0.01em;
    }
    .dash-tempo-diff {
      font-size: 10px;
      font-weight: 700;
      color: #059669;
    }
    .dash-tempo-badge {
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(16,185,129,0.12);
      color: #059669;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }

    .dash-footer {
      padding: 8px 24px;
      text-align: center;
      font-size: 9px;
      color: #9ca3af;
      border-top: 1px solid #e2e8f0;
      background: #fff;
    }

    @media (max-width: 720px) {
      .dash-kpis { grid-template-columns: repeat(2, 1fr); }
      .dash-header { padding: 12px 16px; }
      .dash-body { padding: 12px 16px; }
    }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* [06] 3 PILARES — Bento Grid (Opção A': 9 anos no topo direita)      */
    /* Largura 1100px pra alinhar com [04] e [05]                          */
    /* ═══════════════════════════════════════════════════════════════════ */
    #pilares {
      padding: clamp(60px, 7vw, 96px) 0 clamp(48px, 5vw, 72px);
      position: relative;
    }
    .pilares-head {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 64px;
      padding: 0 var(--gutter);
    }
    .pilares-head .eyebrow { margin-bottom: 22px; }
    .pilares-head h2 {
      font-size: clamp(34px, 4.6vw, 54px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.08;
      margin: 0;
      color: var(--c-text);
    }

    .pilares-grid {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      grid-template-rows: minmax(280px, auto) minmax(280px, auto);
      grid-template-areas:
        "sofia nove"
        "sofia multi";
      gap: 20px;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    .pilar-card {
      position: relative;
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-lg);
      padding: clamp(28px, 2.8vw, 38px);
      backdrop-filter: blur(12px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color var(--dur-slow) var(--ease-premium),
                  transform var(--dur-slow) var(--ease-premium);
    }
    .pilar-card:hover {
      border-color: var(--c-border-strong);
      transform: translateY(-3px);
      box-shadow: 0 24px 60px -24px rgba(0,66,188,0.35),
                  inset 0 0 0 1px rgba(91,141,255,0.08);
    }
    .pilar-card--sofia { grid-area: sofia; }
    .pilar-card--nove  { grid-area: nove; }
    .pilar-card--multi { grid-area: multi; }

    /* Glow accents — Sofia dominante, vizinhos com profundidade sutil */
    .pilar-card--sofia::before {
      content: "";
      position: absolute;
      top: -20%;
      right: -10%;
      width: 55%;
      height: 55%;
      background: radial-gradient(circle, var(--c-glow-soft), transparent 70%);
      filter: blur(50px);
      pointer-events: none;
      z-index: 0;
    }
    .pilar-card--nove::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -20%;
      width: 50%;
      height: 60%;
      background: radial-gradient(circle, var(--c-glow-soft), transparent 70%);
      filter: blur(44px);
      opacity: 0.55;
      pointer-events: none;
      z-index: 0;
    }
    .pilar-card--multi::before {
      content: "";
      position: absolute;
      bottom: -25%;
      left: -15%;
      width: 50%;
      height: 55%;
      background: radial-gradient(circle, var(--c-glow-soft), transparent 70%);
      filter: blur(44px);
      opacity: 0.55;
      pointer-events: none;
      z-index: 0;
    }
    .pilar-card > * { position: relative; z-index: 1; }

    .pilar-eyebrow {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--c-text-muted);
      margin: 0 0 14px;
    }
    .pilar-headline {
      font-size: clamp(20px, 1.9vw, 26px);
      font-weight: 600;
      line-height: 1.22;
      color: var(--c-text);
      margin: 0 0 10px;
      letter-spacing: -0.01em;
    }
    .pilar-body {
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--c-text-soft);
      margin: 0;
    }
    .pilar-card--sofia .pilar-body { font-size: 14.5px; line-height: 1.6; }

    /* ── Pilar 1 visual: janela de chat imersiva (peça central) ──────── */
    .pilar-sofia-window {
      margin-top: 22px;
      flex: 1;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      background: linear-gradient(180deg, rgba(8,8,15,0.7) 0%, rgba(8,8,15,0.5) 100%);
      border: 1px solid var(--c-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 12px 40px -12px rgba(0,0,0,0.5),
                  inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .pilar-sofia-window-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      border-bottom: 1px solid var(--c-border);
      background: rgba(255,255,255,0.02);
      min-width: 0;
    }
    .pilar-sofia-window-avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--f-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      flex-shrink: 0;
    }
    .pilar-sofia-window-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
      overflow: hidden;
    }
    .pilar-sofia-window-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--c-text);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pilar-sofia-window-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--f-mono);
      font-size: 10px;
      letter-spacing: 0.05em;
      color: var(--c-text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pilar-sofia-window-status::before { flex-shrink: 0; }
    .pilar-sofia-window-status::before {
      content: "";
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #5b8dff;
      box-shadow: 0 0 8px rgba(91,141,255,0.7);
      animation: pilar-sofia-pulse 1.4s ease-in-out infinite;
    }
    .pilar-sofia-window-timer {
      font-family: var(--f-mono);
      font-size: 11px;
      color: var(--c-text-muted);
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }
    .pilar-sofia-window-body {
      flex: 1;
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 8px;
      background: radial-gradient(circle at 30% 20%, rgba(0,66,188,0.05), transparent 60%);
      overflow: hidden;
    }
    .pilar-sofia-msg {
      max-width: 78%;
      padding: 9px 13px;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.42;
    }
    .pilar-sofia-msg--in {
      align-self: flex-start;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--c-border);
      color: var(--c-text);
      border-bottom-left-radius: 4px;
    }
    .pilar-sofia-msg--out {
      align-self: flex-end;
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      color: #fff;
      border-bottom-right-radius: 4px;
      box-shadow: 0 4px 16px rgba(0,66,188,0.28);
    }
    .pilar-sofia-typing {
      align-self: flex-end;
      display: inline-flex;
      gap: 4px;
      padding: 10px 14px;
      background: linear-gradient(135deg, rgba(0,66,188,0.7), rgba(91,141,255,0.7));
      border: 1px solid rgba(91,141,255,0.25);
      border-radius: 14px 14px 4px 14px;
      width: fit-content;
      transform-origin: bottom right;
      animation: pilar-typing-once 2.6s ease-in-out 0.4s forwards;
      box-shadow: 0 4px 16px rgba(0,66,188,0.18);
    }
    .pilar-sofia-typing span {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.95);
      animation: pilar-typing-bounce 1.4s ease-in-out infinite;
    }
    .pilar-sofia-typing span:nth-child(2) { animation-delay: 0.2s; }
    .pilar-sofia-typing span:nth-child(3) { animation-delay: 0.4s; }

    /* Mensagem que aparece após o typing (loop dinâmico) */
    .pilar-sofia-msg--reveal {
      transform-origin: bottom right;
      animation: pilar-msg-reveal-once 2.6s ease-in-out 0.4s forwards;
    }

    /* Animação one-shot: typing aparece, some, mensagem entra e fica */
    @keyframes pilar-typing-once {
      0% {
        opacity: 0;
        transform: translateY(4px) scale(0.94);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: -8px;
        border-width: 0;
      }
      18%, 68% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 36px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 0;
        border-width: 1px;
      }
      82%, 100% {
        opacity: 0;
        transform: translateY(-4px) scale(0.92);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: -8px;
        border-width: 0;
      }
    }

    @keyframes pilar-msg-reveal-once {
      0%, 72% {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: -8px;
      }
      88%, 100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 80px;
        padding-top: 9px;
        padding-bottom: 9px;
        margin-top: 0;
      }
    }
    .pilar-sofia-window-foot {
      padding: 10px 16px;
      border-top: 1px solid var(--c-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: rgba(255,255,255,0.02);
    }
    .pilar-sofia-window-foot-label {
      font-family: var(--f-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--c-text-muted);
    }
    .pilar-sofia-window-foot-time {
      font-family: var(--f-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--c-text);
    }
    .pilar-sofia-window-foot-time strong {
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 700;
    }
    @keyframes pilar-sofia-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.65); }
    }
    @keyframes pilar-typing-bounce {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
      30% { transform: translateY(-3px); opacity: 1; }
    }

    /* ── Pilar 3 visual: 9 sólido + headline clara ──────────────────── */
    .pilar-nove-block {
      display: flex;
      align-items: center;
      gap: clamp(14px, 1.6vw, 20px);
      margin: 4px 0 18px;
      min-width: 0;
    }
    .pilar-nove-numeral {
      font-family: var(--f-display);
      font-weight: 800;
      font-size: clamp(80px, 8.5vw, 116px);
      line-height: 0.85;
      letter-spacing: -0.05em;
      background: linear-gradient(135deg, #0042bc 0%, #5b8dff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      flex-shrink: 0;
      padding-right: 2px; /* protege descender do gradient não cortar */
    }
    .pilar-nove-side {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      flex: 1;
    }
    .pilar-nove-side-label {
      font-size: clamp(14px, 1.25vw, 17px);
      font-weight: 600;
      color: var(--c-text);
      line-height: 1.22;
      letter-spacing: -0.01em;
    }
    .pilar-nove-side-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--f-mono);
      font-size: 10.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--c-text-soft);
      background: rgba(91,141,255,0.08);
      border: 1px solid rgba(91,141,255,0.2);
      border-radius: 999px;
      padding: 4px 10px 4px 8px;
      width: fit-content;
    }
    .pilar-nove-side-tag::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #5b8dff;
      box-shadow: 0 0 8px rgba(91,141,255,0.7);
      animation: pilar-sofia-pulse 1.8s ease-in-out infinite;
    }

    /* Mini-timeline: 3 dots conectados representando 2017 → hoje */
    .pilar-nove-timeline {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--c-border);
      display: flex;
      align-items: center;
      gap: 0;
    }
    .pilar-nove-timeline-track {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg,
        rgba(91,141,255,0.15) 0%,
        rgba(91,141,255,0.5) 50%,
        rgba(91,141,255,0.85) 100%);
      position: relative;
    }
    .pilar-nove-timeline-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--c-bg);
      border: 1.5px solid rgba(91,141,255,0.5);
      flex-shrink: 0;
    }
    .pilar-nove-timeline-dot--end {
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      border-color: rgba(91,141,255,0.85);
      box-shadow: 0 0 10px rgba(91,141,255,0.5);
    }
    .pilar-nove-timeline-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      font-family: var(--f-mono);
      font-size: 9.5px;
      letter-spacing: 0.1em;
      color: var(--c-text-muted);
      text-transform: uppercase;
    }
    .pilar-nove-timeline-labels span:last-child { color: var(--c-text-soft); }

    /* ── Pilar 2 visual: MS no topo → conector → pilha 3D de painéis ─── */
    .pilar-multi-diagrama {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      width: 100%;
      padding-top: 8px;
    }
    .pilar-multi-conectores {
      width: 100%;
      max-width: 2px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pilar-multi-conn-line {
      width: 1.5px;
      height: 100%;
      background: linear-gradient(180deg,
        rgba(91,141,255,0.85) 0%,
        rgba(91,141,255,0.15) 100%);
      border-radius: 1px;
    }

    /* Pilha 3D de painéis — 1 cliente em foco, 2 atrás espiando */
    .pilar-multi-stack {
      position: relative;
      width: 100%;
      max-width: 280px;
      height: 116px;
      margin-top: 6px;
    }
    .pilar-multi-screen {
      position: absolute;
      inset: 0;
      border-radius: 8px;
      border: 1px solid var(--c-border);
      background: linear-gradient(180deg, rgba(20,20,38,0.85) 0%, rgba(15,15,30,0.65) 100%);
      transform-origin: center top;
      transition: transform var(--dur-slow) var(--ease-premium),
                  opacity var(--dur-slow) var(--ease-premium);
    }
    .pilar-multi-screen--back2 {
      transform: translate(-12px, -14px) scale(0.9);
      opacity: 0.32;
      filter: blur(0.6px);
      z-index: 1;
    }
    .pilar-multi-screen--back1 {
      transform: translate(-6px, -7px) scale(0.95);
      opacity: 0.6;
      filter: blur(0.2px);
      z-index: 2;
    }
    .pilar-multi-screen--front {
      z-index: 3;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      border-color: rgba(91,141,255,0.25);
      background: linear-gradient(180deg, rgba(20,20,38,0.95) 0%, rgba(15,15,30,0.78) 100%);
      box-shadow: 0 16px 36px -12px rgba(0,66,188,0.45),
                  inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .pilar-card--multi:hover .pilar-multi-screen--back2 {
      transform: translate(-14px, -16px) scale(0.9);
    }
    .pilar-card--multi:hover .pilar-multi-screen--back1 {
      transform: translate(-8px, -9px) scale(0.95);
    }
    .pilar-multi-screen-head {
      display: flex;
      align-items: center;
      gap: 7px;
      padding-bottom: 7px;
      border-bottom: 1px solid var(--c-border);
    }
    .pilar-multi-screen-icon {
      width: 16px; height: 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--f-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.02em;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0,66,188,0.35);
    }
    .pilar-multi-screen-name {
      font-family: var(--f-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--c-text);
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    .pilar-multi-screen-name-tag {
      margin-left: auto;
      font-family: var(--f-mono);
      font-size: 8.5px;
      letter-spacing: 0.12em;
      color: var(--c-text-muted);
      flex-shrink: 0;
    }
    .pilar-multi-screen-value {
      font-family: var(--f-display);
      font-weight: 700;
      font-size: 24px;
      line-height: 1.1;
      letter-spacing: -0.02em;
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-top: 4px;
    }
    .pilar-multi-screen-meta {
      font-family: var(--f-mono);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: var(--c-text-muted);
      text-transform: uppercase;
    }
    .pilar-multi-ms {
      padding: 9px 20px;
      border-radius: 8px;
      background: linear-gradient(135deg, #0042bc, #5b8dff);
      color: #fff;
      font-family: var(--f-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      box-shadow: 0 8px 28px rgba(0,66,188,0.45),
                  0 0 0 1px rgba(91,141,255,0.25),
                  inset 0 1px 0 rgba(255,255,255,0.18);
      animation: pilar-ms-pulse 3.6s ease-in-out infinite;
    }
    @keyframes pilar-ms-pulse {
      0%, 100% {
        box-shadow: 0 8px 28px rgba(0,66,188,0.45),
                    0 0 0 1px rgba(91,141,255,0.25),
                    inset 0 1px 0 rgba(255,255,255,0.18);
      }
      50% {
        box-shadow: 0 8px 32px rgba(0,66,188,0.55),
                    0 0 0 4px rgba(91,141,255,0.10),
                    inset 0 1px 0 rgba(255,255,255,0.22);
      }
    }

    /* ── Responsivo ────────────────────────────────────────────────── */
    @media (max-width: 880px) {
      .pilares-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
          "sofia"
          "nove"
          "multi";
      }
      .pilar-card--sofia { min-height: 440px; }
      .pilar-card--nove  { min-height: 220px; }
      .pilar-card--multi { min-height: 240px; }
    }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* [07] PRICING — 3 planos com Agency central elevado                  */
    /* Squad híbrido: arquitetura premium + NumberFlow vanilla + star icon */
    /* ═══════════════════════════════════════════════════════════════════ */
    /* ─── OCULTO TEMPORARIAMENTE: seção Planos (mobile + desktop) + links no nav/footer. */
    /* Pedido do André, 2026-06, "por enquanto". Reativar: apagar estas 2 regras.        */
    #planos { display: none !important; }
    li:has(> a[href="#planos"]) { display: none !important; }
    /* Blog tambem oculto por enquanto (pedido do Andre, 2026-06-17, "por enquanto").
       Reativar: apagar a regra abaixo. Markup do blog segue intacto no nav/footer. */
    li:has(> a[href="/blog"]) { display: none !important; }

    #planos {
      padding: clamp(56px, 6vw, 80px) 0 clamp(64px, 7vw, 96px);
      position: relative;
    }
    .planos-head {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 28px;
      padding: 0 var(--gutter);
    }
    .planos-head .eyebrow { margin-bottom: 16px; }
    .planos-head h2 {
      font-size: clamp(30px, 3.6vw, 42px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin: 0 0 12px;
      color: var(--c-text);
    }
    .planos-head .sub {
      font-size: 15px;
      line-height: 1.55;
      color: var(--c-text-soft);
      max-width: 580px;
      margin: 0 auto;
    }

    /* CTA freemium unico (substitui a grade de planos no go-live freemium) */
    .planos-cta-freemium {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      text-align: center;
      padding: 0 var(--gutter);
      margin-top: 8px;
    }

    /* ── Microcopy + Trust strip ─────────────────────────────────────── */
    .planos-trust {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 28px;
      font-family: var(--f-mono);
      font-size: 11.5px;
      letter-spacing: 0.06em;
      color: var(--c-text-muted);
    }
    .planos-trust-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .planos-trust-check {
      width: 12px; height: 12px;
      color: #5b8dff;
    }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* [08] FAQ — Accordion single-open premium (vanilla)                  */
    /* Técnica: grid-template-rows 0fr→1fr (anima height:auto sem JS)      */
    /* ═══════════════════════════════════════════════════════════════════ */
    #faq {
      padding: clamp(32px, 4vw, 56px) 0 clamp(72px, 8vw, 104px);
      position: relative;
    }
    .faq-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 40px;
      padding: 0 var(--gutter);
    }
    .faq-head .eyebrow { margin-bottom: 16px; }
    .faq-head h2 {
      font-size: clamp(30px, 3.6vw, 42px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin: 0;
      color: var(--c-text);
    }
    .faq-head .accent-gradient {
      background: linear-gradient(135deg, #5b8dff 0%, #93b4ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-style: italic;
      letter-spacing: -0.02em;
    }

    .faq-list {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      max-width: 760px;
      padding: 0 var(--gutter);
    }
    .faq-item {
      position: relative;
      border-top: 1px solid var(--c-border);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 600ms var(--ease-premium),
                  transform 600ms var(--ease-premium);
    }
    .faq-item:last-child { border-bottom: 1px solid var(--c-border); }
    #faq.in-view .faq-item { opacity: 1; transform: translateY(0); }
    #faq.in-view .faq-item:nth-child(1) { transition-delay: 0ms; }
    #faq.in-view .faq-item:nth-child(2) { transition-delay: 80ms; }
    #faq.in-view .faq-item:nth-child(3) { transition-delay: 160ms; }
    #faq.in-view .faq-item:nth-child(4) { transition-delay: 240ms; }
    #faq.in-view .faq-item:nth-child(5) { transition-delay: 320ms; }

    /* Trailing line: aparece à esquerda do número quando item aberto */
    .faq-item-line {
      position: absolute;
      left: -16px;
      top: 22px;
      bottom: 22px;
      width: 2px;
      border-radius: 1px;
      background: linear-gradient(180deg, #5b8dff 0%, rgba(91,141,255,0) 100%);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 500ms var(--ease-premium);
      pointer-events: none;
    }
    .faq-item.is-open .faq-item-line { transform: scaleY(1); }

    /* Trigger (linha clicável da pergunta) */
    .faq-trigger {
      width: 100%;
      background: transparent;
      border: 0;
      padding: 22px 0;
      display: grid;
      grid-template-columns: 40px 1fr 32px;
      gap: 16px;
      align-items: center;
      text-align: left;
      cursor: pointer;
      color: inherit;
      font-family: inherit;
      position: relative;
      transition: background var(--dur-base) var(--ease-premium);
    }
    .faq-trigger::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(91,141,255,0.04), transparent);
      opacity: 0;
      transition: opacity var(--dur-base) var(--ease-premium);
      pointer-events: none;
    }
    .faq-trigger:hover::before { opacity: 1; }
    .faq-trigger:focus-visible {
      outline: 2px solid rgba(91,141,255,0.5);
      outline-offset: 4px;
      border-radius: 4px;
    }

    .faq-num {
      font-family: var(--f-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2em;
      color: var(--c-text-muted);
      transition: color 300ms var(--ease-premium),
                  font-weight 300ms var(--ease-premium);
    }
    .faq-item.is-open .faq-num,
    .faq-trigger:hover .faq-num {
      color: #93b4ff;
    }
    .faq-item.is-open .faq-num {
      font-weight: 700;
      color: var(--c-text);
    }

    .faq-question {
      font-family: var(--f-display);
      font-size: 17px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--c-text);
      margin: 0;
      letter-spacing: -0.01em;
    }

    .faq-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1px solid var(--c-border);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex-shrink: 0;
      transition: border-color var(--dur-base) var(--ease-premium),
                  background var(--dur-base) var(--ease-premium);
    }
    .faq-trigger:hover .faq-icon {
      border-color: rgba(91,141,255,0.4);
    }
    .faq-item.is-open .faq-icon {
      border-color: rgba(91,141,255,0.55);
      background: rgba(91,141,255,0.08);
    }
    .faq-icon-line {
      position: absolute;
      background: var(--c-text-soft);
      border-radius: 1px;
      transition: transform 300ms var(--ease-premium),
                  opacity 300ms var(--ease-premium),
                  background var(--dur-base) var(--ease-premium);
    }
    .faq-icon-line--h {
      width: 12px; height: 1.5px;
    }
    .faq-icon-line--v {
      width: 1.5px; height: 12px;
    }
    .faq-item.is-open .faq-icon-line { background: #93b4ff; }
    .faq-item.is-open .faq-icon-line--v {
      transform: rotate(90deg);
      opacity: 0;
    }

    /* Panel (resposta) — anima via grid-template-rows */
    .faq-panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 400ms var(--ease-premium);
    }
    .faq-item.is-open .faq-panel {
      grid-template-rows: 1fr;
    }
    .faq-panel-inner {
      overflow: hidden;
      min-height: 0;
    }
    .faq-answer {
      padding: 4px 0 22px 56px;
      max-width: 600px;
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--c-text-soft);
      margin: 0;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 350ms var(--ease-premium) 50ms,
                  transform 350ms var(--ease-premium) 50ms;
    }
    .faq-item.is-open .faq-answer {
      opacity: 1;
      transform: translateY(0);
    }

    /* Foot link */
    .faq-foot {
      text-align: center;
      margin: 48px auto 0;
      max-width: 720px;
      padding: 0 var(--gutter);
      font-size: 14px;
      color: var(--c-text-muted);
    }
    .faq-foot-link {
      color: #7ea8ff;
      text-decoration: none;
      border-bottom: 1px solid rgba(91,141,255,0.3);
      padding: 0 2px 2px;
      transition: color var(--dur-base), border-color var(--dur-base);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .faq-foot-link:hover {
      color: #93b4ff;
      border-color: #93b4ff;
    }
    .faq-foot-link .arrow {
      transition: transform var(--dur-base) var(--ease-premium);
      display: inline-block;
    }
    .faq-foot-link:hover .arrow { transform: translateX(4px); }

    /* Reduced motion: troca instantânea */
    @media (prefers-reduced-motion: reduce) {
      .faq-panel { transition: none; }
      .faq-answer { transition: none; }
      .faq-item-line { transition: none; }
    }

    /* Responsivo */
    @media (max-width: 560px) {
      .faq-trigger {
        grid-template-columns: 32px 1fr 28px;
        gap: 12px;
        padding: 18px 0;
      }
      .faq-question { font-size: 15.5px; }
      .faq-icon { width: 28px; height: 28px; }
      .faq-icon-line--h { width: 10px; }
      .faq-icon-line--v { height: 10px; }
      .faq-answer { padding-left: 44px; font-size: 14.5px; }
      .faq-item-line { left: -10px; }
    }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* [09] CTA FINAL — Aurora full-bleed + tagline gigante                */
    /* Last call premium: aurora orgânica + linha accent + keyboard hint   */
    /* ═══════════════════════════════════════════════════════════════════ */
    #cta-final {
      position: relative;
      width: 100%;
      min-height: 92vh;
      padding: clamp(96px, 14vw, 200px) 0 clamp(96px, 14vw, 200px);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(42% 46% at 22% 18%, rgba(0,66,188,0.42), transparent 62%),
        radial-gradient(38% 42% at 88% 40%, rgba(91,141,255,0.26), transparent 66%),
        radial-gradient(46% 52% at 30% 96%, rgba(0,30,87,0.5), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 50%, #001e57 0%, var(--c-bg-deep) 72%);
    }

    /* Aurora animada (3 blobs blur 140px + drifts) e grain removidos (spec 527,
       item 3): o fundo do #cta-final agora é estático, enriquecido acima. */

    /* Camada de produto em duotone azul (o sistema "rodando sozinho") atrás da tagline.
       Sem foto, sem asset novo: reusa o mockup do dashboard + background-blend-mode pra
       virar duotone, baixa opacidade + máscara radial dissolvendo no fundo. */
    .ctaf-shot {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(1080px, 92vw);
      aspect-ratio: 920 / 532;
      pointer-events: none;
      opacity: 0.16;
      border-radius: var(--radius-lg);
      background-image: linear-gradient(135deg, #2e6bff, #001233), url("/thumbs/hero-agencia.webp");
      background-blend-mode: color;
      background-size: cover;
      background-position: center;
      -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 22%, transparent 78%);
      mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 22%, transparent 78%);
    }
    @media (max-width: 720px) {
      .ctaf-shot { width: 94vw; opacity: 0.12; }
    }

    /* Conteúdo central */
    .ctaf-content {
      position: relative;
      z-index: 2;
      max-width: 880px;
      margin: 0 auto;
      padding: 0 var(--gutter);
      text-align: center;
    }

    .ctaf-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--f-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--c-text-muted);
      margin: 0 0 36px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
    }
    .ctaf-eyebrow::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #5b8dff;
      box-shadow: 0 0 8px rgba(91,141,255,0.7);
    }
    .ctaf-eyebrow-time {
      color: var(--c-text-soft);
      font-weight: 700;
      letter-spacing: 0.1em;
    }

    /* Tagline gigante 2 linhas */
    .ctaf-tagline-wrap {
      position: relative;
      display: inline-block;
      margin: 0 0 28px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
    }
    .ctaf-line {
      position: absolute;
      left: -28px;
      top: 18%;
      width: 2px;
      height: 60%;
      background: linear-gradient(180deg, #5b8dff 0%, rgba(91,141,255,0) 100%);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 900ms var(--ease-premium) 200ms;
      pointer-events: none;
    }
    .ctaf-tagline {
      font-family: var(--f-display);
      font-size: clamp(30px, 5vw, 56px);
      font-weight: 700;
      line-height: 0.95;
      letter-spacing: -0.04em;
      color: var(--c-text);
      margin: 0;
    }
    .ctaf-tagline-l2 {
      display: block;
      background: linear-gradient(135deg, #5b8dff 0%, #93b4ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -0.04em;
    }
    @media (max-width: 1024px) {
      .ctaf-line { display: none; }
    }

    .ctaf-sub {
      font-size: clamp(16px, 1.6vw, 19px);
      font-weight: 400;
      line-height: 1.55;
      color: var(--c-text-soft);
      max-width: 660px;
      margin: 0 auto 44px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
    }

    .ctaf-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 18px;
      margin-bottom: 22px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
    }

    /* CTA primário — final form (maior + pulse + shimmer) */
    .ctaf-primary {
      position: relative;
      padding: 22px 42px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.01em;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #0042bc 0%, #5b8dff 100%);
      color: #fff;
      border: 0;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      overflow: hidden;
      box-shadow: 0 14px 50px -12px rgba(0,66,188,0.65),
                  inset 0 1px 0 rgba(255,255,255,0.2);
      transition: transform 300ms var(--ease-premium),
                  box-shadow 300ms var(--ease-premium);
    }
    .ctaf-primary::after {
      content: "";
      position: absolute;
      top: 0; left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 50%,
        transparent 100%);
      transition: left 700ms var(--ease-premium);
      pointer-events: none;
    }
    .ctaf-primary:hover {
      transform: scale(1.04);
      box-shadow: 0 20px 60px -10px rgba(91,141,255,0.55),
                  inset 0 1px 0 rgba(255,255,255,0.25);
      animation: none;
    }
    .ctaf-primary:hover::after { left: 130%; }
    .ctaf-primary svg {
      width: 18px; height: 18px;
      transition: transform 300ms var(--ease-premium);
    }
    .ctaf-primary:hover svg { transform: translateX(4px); }

    /* CTA secundário */
    .ctaf-secondary {
      padding: 22px 32px;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.01em;
      border-radius: var(--radius-md);
      background: transparent;
      border: 1px solid var(--c-border-strong);
      color: var(--c-text-soft);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: color var(--dur-base) var(--ease-premium),
                  border-color var(--dur-base) var(--ease-premium),
                  background var(--dur-base) var(--ease-premium);
    }
    .ctaf-secondary:hover {
      color: var(--c-text);
      border-color: rgba(91,141,255,0.5);
      background: rgba(91,141,255,0.06);
    }

    .ctaf-microcopy {
      font-family: var(--f-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      color: var(--c-text-muted);
      margin: 0;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
    }

    /* Reveal stagger on enter */
    #cta-final.in-view .ctaf-eyebrow     { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
    #cta-final.in-view .ctaf-tagline-wrap { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
    #cta-final.in-view .ctaf-tagline-wrap .ctaf-line { transform: scaleY(1); }
    #cta-final.in-view .ctaf-sub         { opacity: 1; transform: translateY(0); transition-delay: 220ms; }
    #cta-final.in-view .ctaf-actions     { opacity: 1; transform: translateY(0); transition-delay: 340ms; }
    #cta-final.in-view .ctaf-microcopy   { opacity: 1; transform: translateY(0); transition-delay: 440ms; }

    /* Reduced motion: mantém a linha da tagline estática (aurora/pulses já não
       existem globalmente após a spec 527). */
    @media (prefers-reduced-motion: reduce) {
      .ctaf-line { transition: none; transform: scaleY(1); }
    }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* AJUSTES MOBILE — Fase 2 (Sem mexer no desktop)                      */
    /* Todas as regras dentro de @media (max-width: ...) — desktop intocado */
    /* ═══════════════════════════════════════════════════════════════════ */

    /* ── Painel mobile do menu burger (escondido por padrão) ─────────── */
    .nav-mobile-panel {
      display: none;
    }
    .nav-mobile-overlay {
      display: none;
    }

    @media (max-width: 880px) {
      /* Reduzir spacer pra cortar espaço vazio */
      .nav-spacer { height: 72px; }

      /* Nav: ajustes pra menu mobile */
      .nav-inner { padding: 0 var(--gutter); }
      .nav-brand img { height: 30px; }
      .nav-burger {
        transition: background var(--dur-base), border-color var(--dur-base),
                    transform var(--dur-base) var(--ease-premium);
      }
      .nav.is-mobile-open .nav-burger {
        background: rgba(91,141,255,0.1);
        border-color: rgba(91,141,255,0.35);
      }
      .nav.is-mobile-open .nav-burger svg { transform: rotate(90deg); }

      /* Painel mobile que abre abaixo da nav */
      .nav-mobile-panel {
        display: block;
        position: fixed;
        top: 72px;
        left: 0; right: 0;
        background: rgba(8, 8, 15, 0.98);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid var(--c-border);
        padding: 0 var(--gutter);
        max-height: 0;
        overflow: hidden;
        transition: max-height 380ms var(--ease-premium),
                    border-color 380ms var(--ease-premium);
        z-index: 99;
      }
      .nav.is-mobile-open .nav-mobile-panel {
        max-height: 500px;
        border-bottom-color: var(--c-border-strong);
      }
      .nav-mobile-links {
        list-style: none;
        padding: 20px 0 12px;
        margin: 0;
        display: flex;
        flex-direction: column;
      }
      .nav-mobile-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 4px;
        font-size: 16px;
        font-weight: 500;
        color: var(--c-text-soft);
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        transition: color var(--dur-base), padding-left var(--dur-base) var(--ease-premium);
      }
      .nav-mobile-links a:hover,
      .nav-mobile-links a:focus-visible {
        color: var(--c-text);
        padding-left: 8px;
      }
      .nav-mobile-links a::after {
        content: "→";
        font-family: var(--f-mono);
        opacity: 0.3;
        font-size: 14px;
        transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-premium);
      }
      .nav-mobile-links a:hover::after {
        opacity: 0.8;
        transform: translateX(4px);
      }
      .nav-mobile-actions {
        padding: 16px 0 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .nav-mobile-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
      }
      .nav-mobile-login {
        text-align: center;
        padding: 12px;
        color: var(--c-text-soft);
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 0.02em;
        border: 1px solid transparent;
        transition: color var(--dur-base);
      }
      .nav-mobile-login:hover { color: var(--c-text); }

      /* Overlay escuro atrás do painel (clique fora fecha) */
      .nav-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms var(--ease-premium);
        z-index: 98;
      }
      .nav.is-mobile-open ~ .nav-mobile-overlay {
        opacity: 1;
        pointer-events: auto;
      }

      /* Body trava scroll quando menu aberto */
      body.nav-mobile-locked { overflow: hidden; }

      /* HERO mobile — hero confortável em 1 dobra (mas com respiro) */
      #hero {
        padding-top: clamp(32px, 7vw, 56px);
        padding-bottom: clamp(40px, 8vw, 64px);
        min-height: auto;
      }
      .hero-content .eyebrow {
        margin-bottom: 22px;
        font-size: 9.5px;
        letter-spacing: 0.12em;
        white-space: nowrap;
        padding: 6px 13px;
      }
      .hero-headline {
        font-size: clamp(30px, 8vw, 46px);
        line-height: 0.96;
        margin: 0 0 22px;
      }
      .hero-sub-c {
        font-size: 13.5px;
        line-height: 1.55;
        margin: 0 auto 28px;
        max-width: 560px;
      }
      .hero-cta-c {
        gap: 12px;
        margin-bottom: 22px;
      }
      .hero-cta-c .btn-primary { padding: 16px 26px; font-size: 15px; }

      /* [03] INTEGRAÇÕES — label em 1 linha + cola com [04] */
      #integracoes {
        padding: clamp(24px, 4vw, 36px) 0 clamp(20px, 3vw, 28px);
      }
      .integ-label {
        font-size: 9.5px;
        letter-spacing: 0.12em;
        margin: 0 0 16px;
        white-space: nowrap;
      }

      /* [04] PROBLEMA — começar logo abaixo da [03] */
      #problema {
        padding: clamp(28px, 5vw, 44px) 0 clamp(32px, 5vw, 48px);
      }

      /* [05] PRODUTO EM AÇÃO — Opção B: 3 cards empilhados (sem 3D scroll) */
      #produto {
        padding: clamp(20px, 4vw, 36px) 0 clamp(40px, 6vw, 64px);
      }
      .produto-head {
        margin: 0 auto 24px;
      }
      .produto-head .eyebrow { margin-bottom: 14px; }
      .produto-head .h-lg { margin: 0 0 12px; font-size: clamp(28px, 7vw, 38px); }
      .produto-head .sub { font-size: 14.5px; line-height: 1.5; }

      /* Veja por dentro: empilhamento já é o padrão; aqui só ajustes de tamanho no mobile */
      .produto-narrativa-item { margin-bottom: 14px; }
      .produto-narrativa-item h3 { font-size: 18px; margin-bottom: 4px; }
      .produto-narrativa-item p { font-size: 13.5px; line-height: 1.45; }
      .produto-cena {
        max-width: 100%;
        height: 420px;
        border-radius: var(--radius-md);
        margin-bottom: 36px;
      }
      .produto-cena[data-cena="3"] { margin-bottom: 0; }
      /* Kanban é layout wide de desktop: renderiza as colunas no tamanho NATURAL
         e corta o excesso com fade (em vez de espremer 4 colunas e sobrepor). */
      .produto-cena[data-cena="2"] .kanban-cols {
        min-width: 760px;
        -webkit-mask-image: linear-gradient(to right, #000 78%, transparent);
        mask-image: linear-gradient(to right, #000 78%, transparent);
      }

      /* [06] PILARES — aproximar do [05] */
      #pilares {
        padding: clamp(20px, 4vw, 36px) 0 clamp(36px, 5vw, 56px);
      }
      .pilares-head {
        margin: 0 auto 28px;
      }
      .pilares-head .eyebrow { margin-bottom: 14px; }
      .pilares-head h2 {
        font-size: clamp(26px, 6.5vw, 36px);
        margin: 0 0 8px;
      }

      /* [07] PRICING — aproximar do [06] + toggle sticky no topo */
      #planos {
        padding: clamp(20px, 4vw, 36px) 0 clamp(40px, 6vw, 64px);
        overflow: visible;
      }
      .planos-head {
        margin: 0 auto 22px;
      }
      .planos-head .eyebrow { margin-bottom: 12px; }
      .planos-head h2 {
        font-size: clamp(26px, 6.5vw, 36px);
        margin: 0 0 10px;
      }
      .planos-head .sub { font-size: 14px; line-height: 1.5; }

      /* [09] CTA FINAL — aproximar do [08] FAQ + ajustar eyebrow 1 linha */
      #cta-final {
        padding: clamp(36px, 7vw, 64px) 0 clamp(40px, 7vw, 72px);
        min-height: auto;
      }
      .ctaf-content { padding: 0 var(--gutter); }
      .ctaf-eyebrow {
        font-size: 10px;
        letter-spacing: 0.14em;
        white-space: nowrap;
        gap: 8px;
        margin: 0 0 24px;
        justify-content: center;
        flex-wrap: nowrap;
      }
      .ctaf-tagline {
        font-size: clamp(26px, 7vw, 40px);
        line-height: 1;
      }
      .ctaf-sub {
        font-size: 14.5px;
        line-height: 1.55;
        margin: 0 auto 28px;
      }
      .ctaf-primary { padding: 16px 28px; font-size: 15px; }
      .ctaf-secondary { padding: 16px 24px; font-size: 14.5px; }
      .ctaf-actions { gap: 12px; margin-bottom: 18px; }
      .ctaf-microcopy { font-size: 11.5px; }

      /* [10] FOOTER — aproximar do [09] + CNPJ não quebrar feio */
      .footer {
        padding-top: clamp(24px, 4vw, 36px);
      }
      .footer-legal {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        font-size: 10.5px;
        line-height: 1.5;
      }
      .footer-legal span { max-width: 100%; }
      .footer-legal-cnpj { white-space: nowrap; }
      .problema-story { gap: 6px; }
    }

    /* ── Fix do samba horizontal: trava overflow-x em mobile ─────────── */
    /* Causa: blobs da aurora [09] + scroll wrapper [05] podem estourar  */
    /* viewport com vw-based widths. Usar overflow-x: clip (não hidden)   */
    /* pra NÃO quebrar position: sticky dos descendentes.                 */
    @media (max-width: 1024px) {
      html, body { overflow-x: clip; }
    }

    /* ═══════════════════════════════════════════════════════════════════ */
    /* [10] FOOTER — Premium B2B (Linear/Stripe pattern adaptado vanilla)  */
    /* ═══════════════════════════════════════════════════════════════════ */
    .footer {
      position: relative;
      border-top: 1px solid var(--c-border);
      padding: clamp(40px, 5vw, 56px) 0 24px;
      color: var(--c-text-muted);
      background:
        radial-gradient(40% 100px at 50% 0%, rgba(91,141,255,0.07), transparent 70%),
        var(--c-bg);
      overflow: hidden;
    }
    /* Shimmer line decorativa no topo */
    .footer::before {
      content: "";
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 33%;
      max-width: 360px;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(91,141,255,0.65) 50%,
        transparent 100%);
      filter: blur(0.5px);
      pointer-events: none;
    }

    .footer-inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 var(--gutter);
      position: relative;
    }

    /* Brand row */
    .footer-brand {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      padding-bottom: 28px;
      border-bottom: 1px solid var(--c-border);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
    }
    .footer-brand-left {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 440px;
    }
    .footer-logo {
      height: 26px;
      width: auto;
    }
    .footer-tagline {
      font-size: 13px;
      line-height: 1.5;
      color: var(--c-text-soft);
      margin: 0;
    }

    /* Status pill */
    .footer-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(91,141,255,0.06);
      border: 1px solid rgba(91,141,255,0.18);
      font-family: var(--f-mono);
      font-size: 10.5px;
      letter-spacing: 0.08em;
      color: var(--c-text-soft);
      text-decoration: none;
      transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
      white-space: nowrap;
    }
    .footer-status:hover {
      background: rgba(91,141,255,0.1);
      border-color: rgba(91,141,255,0.35);
      color: var(--c-text);
    }
    .footer-status-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #5b8dff;
      box-shadow: 0 0 6px rgba(91,141,255,0.7);
      animation: footer-status-pulse 2.4s ease-in-out infinite;
    }
    @keyframes footer-status-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(0.75); }
    }

    /* Grid de colunas */
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      padding: 28px 0 24px;
    }
    .footer-col {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
      min-width: 0;
    }
    .footer-col-label {
      font-family: var(--f-mono);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--c-text-muted);
      margin: 0 0 14px;
      transition: color 300ms var(--ease-premium);
    }
    .footer-col:hover .footer-col-label {
      color: var(--c-text);
    }
    .footer-col-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .footer-col-link {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--c-text-soft);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1.35;
      transition: color var(--dur-base) var(--ease-premium),
                  transform var(--dur-base) var(--ease-premium);
    }
    .footer-col-link:hover {
      color: var(--c-text);
      transform: translateX(2px);
    }

    /* Ícones sociais (linha horizontal dentro da coluna Contato) */
    .footer-social {
      display: flex;
      gap: 12px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--c-border);
    }
    .footer-social-link {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--c-text-muted);
      transition: color var(--dur-base) var(--ease-premium),
                  transform var(--dur-base) var(--ease-premium);
    }
    .footer-social-link svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }
    .footer-social-link:hover {
      color: var(--c-text);
      transform: translateY(-2px);
    }

    /* Linha legal */
    .footer-legal {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding-top: 18px;
      border-top: 1px solid var(--c-border);
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--c-text-muted);
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 700ms var(--ease-premium),
                  transform 700ms var(--ease-premium);
    }
    .footer-legal a {
      color: var(--c-text-soft);
      text-decoration: none;
      transition: color var(--dur-base);
    }
    .footer-legal a:hover { color: var(--c-text); }

    /* Reveal stagger */
    .footer.in-view .footer-brand { opacity: 1; transform: translateY(0); }
    .footer.in-view .footer-col   { opacity: 1; transform: translateY(0); }
    .footer.in-view .footer-col:nth-child(1) { transition-delay: 80ms; }
    .footer.in-view .footer-col:nth-child(2) { transition-delay: 160ms; }
    .footer.in-view .footer-col:nth-child(3) { transition-delay: 240ms; }
    .footer.in-view .footer-col:nth-child(4) { transition-delay: 320ms; }
    .footer.in-view .footer-legal { opacity: 1; transform: translateY(0); transition-delay: 440ms; }

    /* Responsivo */
    @media (max-width: 880px) {
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
      }
      .footer-brand {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
    @media (max-width: 520px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .footer-legal {
        justify-content: center;
        text-align: center;
      }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .footer-status-dot { animation: none; }
      .footer-brand, .footer-col, .footer-legal { transition: none; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       [i18n] Seletor de idioma no nav (PT / EN / ES) — 2026-07-05
       ═══════════════════════════════════════════════════════════════════ */
    .lang-switch { display: inline-flex; align-items: center; gap: 2px; }
    .lang-opt {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 9px;
      border-radius: var(--radius-sm);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .05em;
      color: var(--c-text-soft);
      opacity: .6;
      transition: opacity var(--dur-fast) ease-out, background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
    }
    .lang-opt img { height: 13px; width: auto; border-radius: 2px; display: block; }
    .lang-opt:hover { opacity: 1; color: var(--c-text); background: rgba(255, 255, 255, .05); }
    .lang-opt.is-active { opacity: 1; color: var(--c-text); }
    .nav-mobile-panel .lang-switch { margin-top: 18px; gap: 8px; }
    .nav-mobile-panel .lang-opt { border: 1px solid var(--c-border); opacity: .85; padding: 8px 12px; }
    .nav-mobile-panel .lang-opt.is-active { border-color: var(--c-text-soft); opacity: 1; }

    /* Dropdown de idioma no desktop (gatilho compacto + menu flutuante), spec 526 */
    .lang-dropdown { position: relative; display: inline-flex; }
    .lang-trigger {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 10px;
      background: transparent;
      border: 1px solid var(--c-border);
      border-radius: var(--radius-sm);
      color: var(--c-text-soft);
      font-size: 12px; font-weight: 600; letter-spacing: .05em;
      cursor: pointer;
      transition: color var(--dur-fast) ease-out,
                  border-color var(--dur-fast) ease-out,
                  background var(--dur-fast) ease-out;
    }
    .lang-trigger:hover {
      color: var(--c-text);
      border-color: var(--c-border-strong);
      background: rgba(255, 255, 255, .05);
    }
    .lang-trigger img { height: 13px; width: auto; border-radius: 2px; display: block; }
    .lang-chevron { width: 14px; height: 14px; opacity: .7; transition: transform var(--dur-fast) var(--ease-premium); }
    .lang-trigger[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

    .lang-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 176px;
      margin: 0; padding: 6px;
      list-style: none;
      background: rgba(8, 8, 15, 0.98);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--c-border-strong);
      border-radius: var(--radius-md);
      box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.6);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity var(--dur-fast) ease-out,
                  transform var(--dur-fast) var(--ease-premium),
                  visibility var(--dur-fast) ease-out;
      z-index: 120;
    }
    .lang-dropdown.is-open .lang-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .lang-menu-opt {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 10px;
      border-radius: var(--radius-sm);
      color: var(--c-text-soft);
      font-size: 12.5px; font-weight: 500;
      transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
    }
    .lang-menu-opt img { height: 14px; width: auto; border-radius: 2px; display: block; }
    .lang-menu-code { font-weight: 600; letter-spacing: .04em; font-size: 12px; }
    .lang-menu-name { color: var(--c-text-muted); }
    .lang-menu-opt:hover,
    .lang-menu-opt:focus-visible {
      background: rgba(255, 255, 255, .06);
      color: var(--c-text);
      outline: none;
    }
    .lang-menu-opt.is-active { color: var(--c-text); background: rgba(91, 141, 255, 0.12); }