/* ============================================================
       TOKENS - Design System Forxia
       ============================================================ */
    :root {
      /* Cores */
      --color-primary: #0c75fb;
      --color-primary-soft: #4f9bff;
      /* azul claro p/ texto pequeno: contraste AA sobre fundo escuro */
      --color-primary-hover: #0a64d6;
      --color-bg: #050506;
      /* base - preto neutro */
      --color-surface: #0d0e10;
      /* superfície de seção alternada */
      --color-elevated: #16171a;
      /* cards elevados (1 passo acima) */
      --color-ink: #111111;
      --color-graphite: #262626;
      --color-text: #d2d5d8;
      --color-text-strong: #ffffff;
      --color-text-muted: #8b9199;
      --color-whatsapp: #25d366;
      --color-whatsapp-hover: #1fb955;

      /* Detalhes em branco (acentos premium sobre o dark) */
      --hairline: rgba(255, 255, 255, 0.08);
      --hairline-strong: rgba(255, 255, 255, 0.16);

      /* Tipografia */
      --font-display: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --tracking-wide: 0.1em;

      /* Radius */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-full: 9999px;

      /* Sombras */
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
      --glow-primary: 0 0 24px rgba(12, 117, 251, 0.35);
      --glow-whatsapp: 0 6px 20px rgba(37, 211, 102, 0.5);

      /* Espaçamento (8pt grid) */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 16px;
      --space-4: 24px;
      --space-5: 32px;
      --space-6: 48px;
      --space-7: 64px;
      --space-8: 96px;

      --maxw: 1200px;
      --gutter: 20px;
    }

    /* ============================================================
       RESET / BASE
       ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    body {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.6;
      color: var(--color-text);
      background-color: var(--color-bg);
      overflow-x: clip;
      /* clip (não hidden) para não quebrar position: sticky do manifesto */
      -webkit-font-smoothing: antialiased;
    }

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

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

    ul {
      list-style: none;
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--color-text-strong);
      font-weight: 400;
    }

    :focus-visible {
      outline: 3px solid var(--color-primary);
      outline-offset: 3px;
      border-radius: var(--radius-sm);
    }

    .container {
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    section {
      padding-block: var(--space-8);
    }

    /* Seções em tela cheia (uma "tela" por seção) */
    .section-screen {
      min-height: 100vh;
      min-height: 100svh;
      /* viewport estável no mobile (barra de URL) */
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .section-screen>.container {
      width: 100%;
    }

    /* Ritmo de 2 tons: base (body) ↔ superfície alternada */
    .section-alt {
      background: var(--color-bg);
    }

    /* Sem divisores: o site usa um fundo único */
    .section-divider {
      border-top: none;
    }

    /* Acessibilidade: pular para o conteúdo */
    .skip-link {
      position: absolute;
      left: -999px;
      top: 0;
      background: var(--color-primary);
      color: #fff;
      padding: 12px 20px;
      border-radius: var(--radius-md);
      z-index: 1100;
      font-weight: 600;
    }

    .skip-link:focus {
      left: 12px;
      top: 12px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ============================================================
       TIPOGRAFIA / HELPERS
       ============================================================ */
    .overline {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      color: var(--color-primary-soft);
      display: inline-block;
    }

    .section-head {
      max-width: 640px;
      margin: 0 auto var(--space-6);
      text-align: center;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: 2.5rem;
      line-height: 1.15;
    }

    .section-title strong {
      color: var(--color-primary);
      font-weight: 400;
    }

    .section-sub {
      margin-top: var(--space-3);
      color: var(--color-text-muted);
      font-size: 1.125rem;
    }

    /* ============================================================
       BOTÕES
       ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 16px 32px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 1rem;
      line-height: 1;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      text-align: center;
    }

    .btn svg {
      width: 20px;
      height: 20px;
      flex: none;
    }

    /* Primário sólido, sem efeitos contínuos: o destaque vem da cor e do contraste */
    .btn-primary {
      background: var(--color-primary);
      color: #fff;
      box-shadow: var(--shadow-sm);
      position: relative;
      overflow: hidden;
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      background: var(--color-primary-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .btn-whatsapp {
      background: #fff;
      color: var(--color-primary);
      box-shadow: var(--shadow-sm);
    }

    .btn-whatsapp:hover,
    .btn-whatsapp:focus-visible {
      background: #fff;
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .btn-whatsapp:active {
      transform: translateY(0) scale(0.97);
      box-shadow: var(--shadow-sm);
    }

    .btn-whatsapp .btn-arrow {
      transition: transform 0.25s ease;
    }

    .btn-whatsapp:hover .btn-arrow,
    .btn-whatsapp:focus-visible .btn-arrow {
      transform: translateX(5px);
    }

    .btn-whatsapp:active .btn-arrow {
      transform: translateX(9px);
    }

    .btn-secondary {
      background: transparent;
      color: var(--color-text-strong);
      border: 1.5px solid rgba(255, 255, 255, 0.55);
      padding: 14px 30px;
    }

    .btn-secondary:hover,
    .btn-secondary:focus-visible {
      background: #ffffff;
      border-color: #ffffff;
      color: var(--color-primary);
      transform: translateY(-2px);
    }

    /* ============================================================
       HEADER
       ============================================================ */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
    }

    /* Fundo e blur aparecem só ao rolar; na hero o header é transparente/minimalista */
    .site-header.scrolled {
      background: rgba(5, 5, 6, 0.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom-color: rgba(210, 213, 216, 0.08);
      box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      min-height: 60px;
    }

    .brand {
      font-family: var(--font-display);
      font-size: 1.05rem;
      color: var(--color-text-strong);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0.02em;
    }

    .brand-logo {
      height: 30px;
      width: auto;
      max-width: 220px;
      display: block;
      flex: none;
    }

    /* menu + CTA agrupados na extremidade direita */
    .nav-menu {
      display: flex;
      align-items: center;
      gap: var(--space-5);
      margin-left: auto;
    }

    .nav-menu a {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-text);
      position: relative;
      padding: 6px 0;
      transition: color 0.2s ease;
    }

    .nav-menu a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--color-primary);
      transition: width 0.25s ease;
    }

    .nav-menu a:hover,
    .nav-menu a:focus-visible {
      color: var(--color-text-strong);
    }

    .nav-menu a:hover::after,
    .nav-menu a:focus-visible::after {
      width: 100%;
    }

    .nav-cta {
      display: inline-flex;
      min-height: 40px;
      padding: 10px 20px;
      font-size: 0.9rem;
    }

    .nav-cta-short {
      display: none;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    /* Dropdown de serviços */
    .has-dropdown {
      position: relative;
    }

    .dropdown-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-text);
      cursor: pointer;
      padding: 6px 0;
      transition: color 0.2s ease;
    }

    .dropdown-toggle:hover,
    .dropdown-toggle[aria-expanded="true"] {
      color: var(--color-text-strong);
    }

    .dropdown-toggle .caret {
      width: 14px;
      height: 14px;
      transition: transform 0.25s ease;
    }

    .dropdown-toggle[aria-expanded="true"] .caret {
      transform: rotate(180deg);
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      min-width: 330px;
      background: var(--color-elevated);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-md);
      padding: 8px;
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 1001;
    }

    /* ponte invisível: mantém o hover ativo ao descer o mouse até o menu */
    .dropdown-menu::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -10px;
      height: 10px;
    }

    .has-dropdown:hover .dropdown-menu,
    .has-dropdown:focus-within .dropdown-menu,
    .dropdown-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .dropdown-menu li a {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 10px 12px;
      border-radius: 8px;
      min-height: 44px;
      transition: background 0.2s ease;
    }

    .dropdown-menu li a::after {
      display: none;
    }

    .dropdown-menu li a:hover {
      background: rgba(12, 117, 251, 0.12);
    }

    .dropdown-menu .ddi-icon {
      color: var(--color-primary);
      width: 22px;
      height: 22px;
      flex: none;
      margin-top: 2px;
    }

    .dropdown-menu .ddi-title {
      font-weight: 600;
      color: var(--color-text-strong);
      display: block;
      font-size: 0.92rem;
      white-space: nowrap;
    }

    .dropdown-menu .ddi-sub {
      font-size: 0.78rem;
      color: var(--color-text-muted);
    }

    /* Botão hambúrguer */
    .nav-toggle {
      display: none;
      width: 48px;
      height: 48px;
      background: transparent;
      border: 1px solid rgba(210, 213, 216, 0.2);
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--color-text-strong);
      place-items: center;
    }

    .nav-toggle svg {
      width: 24px;
      height: 24px;
    }

    .nav-toggle .icon-close {
      display: none;
    }

    .nav-toggle[aria-expanded="true"] .icon-open {
      display: none;
    }

    .nav-toggle[aria-expanded="true"] .icon-close {
      display: block;
    }

    /* ============================================================
       HERO
       ============================================================ */
    .hero {
      position: relative;
      isolation: isolate;
      min-height: calc(100vh - var(--header-h, 80px));
      min-height: calc(100svh - var(--header-h, 80px));
      display: flex;
      align-items: center;
      padding-block: var(--space-7);
      overflow: hidden;
      background: var(--color-bg);
    }

    /* camada da imagem do hero (estática) */
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: url('hero.webp') 60% 50% / cover no-repeat;
    }

    /* overlay: escuro à esquerda (para o texto) revelando a imagem à direita */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(5, 5, 6, 0.94) 0%, rgba(5, 5, 6, 0.82) 38%, rgba(5, 5, 6, 0.45) 70%, rgba(5, 5, 6, 0.2) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .hero .container {
      position: relative;
      z-index: 3;
      max-width: 1380px;
    }

    .hero-inner {
      max-width: 760px;
      text-align: left;
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 4.4vw, 3.2rem);
      line-height: 1.1;
      margin-bottom: var(--space-4);
    }

    .hero h1 .light {
      color: var(--color-text);
      display: block;
      font-size: 0.62em;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }

    .hero h1 .strong {
      color: var(--color-text-strong);
      display: block;
    }

    .hero h1 .strong .accent {
      color: var(--color-primary);
    }

    .hero-sub {
      font-size: 1.125rem;
      max-width: 680px;
      margin: 0 0 var(--space-6);
      color: var(--color-text);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
      justify-content: flex-start;
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: var(--space-2) var(--space-3);
      margin-top: var(--space-6);
    }

    /* chips são links para as páginas de serviço (malha interna + affordance honesta) */
    .hero-proof a {
      display: inline-flex;
      align-items: center;
      padding: 6px 14px;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--color-text);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--hairline-strong);
      border-radius: var(--radius-full);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .hero-proof a:hover,
    .hero-proof a:focus-visible {
      transform: translateY(-4px);
      color: var(--color-text-strong);
      border-color: var(--color-primary);
      background: rgba(12, 117, 251, 0.1);
    }

    /* ============================================================
       MANIFESTO - texto que se ilumina conforme o scroll (pin + reveal)
       ============================================================ */
    .manifesto {
      position: relative;
      /* era 220vh = scroll forçado p/ 1 frase; reduzido p/ pintar a frase em ~1 tela extra (sem aprisionar) */
      min-height: 135vh;
      background: var(--color-bg);
    }

    .manifesto-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    /* grade de pontos que reage ao mouse, atrás do texto */
    .manifesto-dots {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .manifesto-sticky>.container {
      position: relative;
      z-index: 1;
    }

    .manifesto-text {
      position: relative;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(1.8rem, 4.4vw, 3.5rem);
      line-height: 1.32;
      letter-spacing: -0.01em;
      max-width: 1080px;
      margin: 0 auto;
      text-align: center;
      color: var(--color-text-strong);
    }

    /* preenchimento conforme o scroll: cinza (a preencher) -> azul (preenchendo) -> branco (preenchido) */
    .manifesto-text .word {
      display: inline-block;
      color: rgba(255, 255, 255, 0.16);
      transition: color 0.5s ease;
    }

    .manifesto-text .word.lit {
      color: #3a93ff;
    }

    .manifesto-text .word.done {
      color: #ffffff;
    }

    @media (prefers-reduced-motion: reduce) {
      .manifesto {
        min-height: 0;
      }

      .manifesto-sticky {
        position: static;
        height: auto;
        padding-block: var(--space-8);
      }
    }

    /* ============================================================
       BARRA DE DIFERENCIAIS (abaixo da hero)
       ============================================================ */
    .feature-bar {
      background: var(--color-elevated);
      border-block: 1px solid var(--hairline-strong);
      padding-block: var(--space-5);
    }

    .feature-bar-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-4) var(--space-5);
    }

    .feature-item {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1 1 180px;
    }

    .feature-item .bar {
      width: 4px;
      height: 38px;
      border-radius: 2px;
      background: var(--color-primary);
      flex: none;
    }

    /* texto sólido e legível: resultados concretos, sem efeito de brilho */
    .feature-item .label {
      display: inline-block;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 1.2rem;
      letter-spacing: 0.01em;
      line-height: 1.25;
      color: var(--color-text-strong);
    }

    /* salto para frente ao entrar na tela (mesmo efeito do "IMPACTO") */
    .feature-bar-list {
      perspective: 1000px;
    }

    .feature-item.reveal {
      opacity: 0;
      transform: translateZ(-420px) scale(0.78);
      transform-origin: center;
    }

    .feature-item.reveal.is-visible {
      animation: nx-feature-jump 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .feature-item.reveal[data-delay="1"].is-visible {
      animation-delay: 0.12s;
    }

    .feature-item.reveal[data-delay="2"].is-visible {
      animation-delay: 0.24s;
    }

    .feature-item.reveal[data-delay="3"].is-visible {
      animation-delay: 0.36s;
    }

    @keyframes nx-feature-jump {
      0% {
        opacity: 0;
        transform: translateZ(-420px) scale(0.78);
      }

      55% {
        opacity: 1;
        transform: translateZ(130px) scale(1.1);
      }

      100% {
        opacity: 1;
        transform: translateZ(0) scale(1);
      }
    }

    /* ============================================================
       QUEM SOMOS
       ============================================================ */
    .about-layout {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: var(--space-7);
      align-items: center;
    }

    .about-text p {
      color: var(--color-text);
      font-size: 1.05rem;
      margin-top: var(--space-3);
    }

    .about-text p+p {
      margin-top: var(--space-3);
    }

    /* Imagem "Quem é a Forxia" - apresentação premium */
    .about-visual {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: visible;
      isolation: isolate;
    }

    /* Borda azul animada percorrendo o contorno da imagem */
    @property --nx-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes nx-border-cw {
      to {
        --nx-angle: 360deg;
      }
    }

    @keyframes nx-border-ccw {
      to {
        --nx-angle: -360deg;
      }
    }

    .about-visual::before,
    .about-visual::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: calc(var(--radius-xl) + 2px);
      background: conic-gradient(from var(--nx-angle),
          transparent 0deg,
          transparent 300deg,
          #0c75fb 332deg,
          #9cc7ff 345deg,
          #0c75fb 354deg,
          transparent 360deg);
      z-index: 0;
      pointer-events: none;
    }

    /* Feixe 1: sentido horário */
    .about-visual::before {
      animation: nx-border-cw 14s linear infinite;
    }

    /* Feixe 2: sentido anti-horário (parte oposta do contorno) */
    .about-visual::after {
      animation: nx-border-ccw 14s linear infinite;
      animation-delay: -7s;
    }

    @media (prefers-reduced-motion: reduce) {

      .about-visual::before,
      .about-visual::after {
        animation: none;
      }

      .about-figure img {
        --img-scale: 1;
        transform: none;
      }
    }

    .about-figure {
      position: relative;
      z-index: 1;
      margin: 0;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: transform .6s cubic-bezier(.16, .84, .44, 1), box-shadow .6s ease;
    }

    @property --img-scale {
      syntax: '<number>';
      initial-value: 1.1;
      inherits: false;
    }

    .about-figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      /* base com leve overscan (1.1) p/ esconder as bordas no parallax + scale no hover */
      transform: translate3d(0, var(--py, 0px), 0) scale(var(--img-scale, 1.1));
      transition: --img-scale 1.2s cubic-bezier(.16, .84, .44, 1);
      will-change: transform;
    }

    /* Moldura interna luminosa + leve gradiente para profundidade */
    .about-figure::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
      background:
        linear-gradient(160deg, rgba(12, 117, 251, 0.10), transparent 45%),
        linear-gradient(0deg, rgba(5, 5, 6, 0.35), transparent 40%);
      pointer-events: none;
    }

    .about-visual:hover .about-figure {
      transform: translateY(-6px);
      box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .about-visual:hover .about-figure img {
      --img-scale: 1.14;
    }

    .about-highlights {
      margin-top: var(--space-5);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .about-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-text-strong);
      padding: 4px 0;
      font-size: 0.95rem;
      font-weight: 500;
    }

    .about-tag svg {
      width: 16px;
      height: 16px;
      color: var(--color-primary);
    }

    /* ============================================================
       SERVIÇOS
       ============================================================ */
    .grid {
      display: grid;
      gap: var(--space-4);
    }

    .grid-services {
      grid-template-columns: repeat(2, 1fr);
    }

    .card {
      background: var(--color-surface);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* linha de luz branca no topo do card - detalhe premium */
    .card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--hairline-strong);
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(12, 117, 251, 0.55);
      box-shadow: var(--shadow-lg);
    }

    .card:hover::before {
      opacity: 1;
    }

    /* faixa de imagem no topo do card (full-bleed) */
    .card-media {
      margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
      height: 190px;
      position: relative;
      overflow: hidden;
    }

    .card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.45s ease;
    }

    /* degradê para integrar a foto ao tema escuro do card */
    .card-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13, 14, 16, 0.15) 0%, rgba(13, 14, 16, 0.55) 60%, var(--color-elevated) 100%);
      pointer-events: none;
    }

    .card:hover .card-media img {
      transform: scale(1.06);
    }

    .card-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: var(--radius-md);
      background: rgba(12, 117, 251, 0.12);
      border: 1px solid rgba(12, 117, 251, 0.25);
      color: var(--color-primary);
      margin-bottom: var(--space-4);
      transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .card-icon svg {
      width: 26px;
      height: 26px;
    }

    /* micro-interação: ícone "acende" em azul cheio c/ glifo branco */
    .card:hover .card-icon {
      transform: scale(1.06) rotate(-3deg);
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    .card h3 {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: var(--space-2);
    }

    .card p {
      color: var(--color-text);
    }

    /* "Saiba mais" no rodapé do card */
    .card-link {
      margin-top: var(--space-4);
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--color-primary);
      transition: gap 0.2s ease, color 0.2s ease;
    }

    .card-link svg {
      width: 18px;
      height: 18px;
      transition: transform 0.2s ease;
    }

    .card:hover .card-link {
      color: #4f9bff;
    }

    /* card inteiro clicável: o link "Saiba mais" se estende sobre todo o card */
    .card {
      cursor: pointer;
    }

    .card-link::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .card:hover .card-link svg {
      transform: translateX(4px);
    }

    /* Elevação correta no dark: cards 1 passo acima da seção alternada */
    .section-alt .card,
    .section-alt .faq-item {
      background: var(--color-elevated);
    }

    /* ============================================================
       SERVIÇOS - carrossel de soluções em scroll (uma por vez)
       Abas no topo · painel (texto à esquerda, imagem à direita) ·
       barra de progresso. Pinado no desktop; empilhado no mobile,
       no prefers-reduced-motion e sem JS (progressive enhancement).
       ============================================================ */
    .svc-scroll {
      position: relative;
      padding-block: 0;
      z-index: 2;
    }

    .svc-scroll-sticky {
      padding-block: var(--space-7);
      display: flex;
      flex-direction: column;
    }

    .svc-scroll-inner {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    .svc-scroll-eyebrow {
      align-self: center;
    }

    /* abas (só aparecem no modo pin / desktop) */
    .svc-tabs {
      display: none;
      align-self: center;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
      padding: 6px;
      border: 1px solid var(--hairline-strong);
      border-radius: var(--radius-full);
      background: rgba(255, 255, 255, 0.03);
    }

    .svc-tab {
      appearance: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-text-muted);
      padding: 10px 18px;
      border-radius: var(--radius-full);
      background: transparent;
      white-space: nowrap;
      transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }

    .svc-tab:hover,
    .svc-tab:focus-visible {
      color: var(--color-text-strong);
    }

    .svc-tab.is-active {
      color: #fff;
      background: var(--color-primary);
    }

    /* painéis - empilhados por padrão (mobile / sem JS) */
    .svc-panels {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }

    .svc-panel {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: var(--space-7);
      align-items: center;
    }

    .svc-panel-text {
      max-width: 540px;
    }

    .svc-panel-text .overline {
      margin-bottom: var(--space-3);
    }

    .svc-panel-text h3 {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 3.2vw, 3rem);
      line-height: 1.1;
      margin-bottom: var(--space-3);
    }

    .svc-panel-text h3 .accent {
      color: var(--color-primary);
    }

    .svc-panel-text p {
      color: var(--color-text);
      font-size: 1.15rem;
      line-height: 1.55;
      margin-bottom: var(--space-5);
    }

    .svc-panel-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 1rem;
      color: var(--color-primary-soft);
    }

    .svc-panel-link svg {
      width: 20px;
      height: 20px;
      transition: transform 0.2s ease;
    }

    .svc-panel-link:hover svg,
    .svc-panel-link:focus-visible svg {
      transform: translateX(5px);
    }

    .svc-panel-media {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--hairline-strong);
      box-shadow: var(--shadow-lg);
      aspect-ratio: 16 / 9;
    }

    .svc-panel-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* barra de progresso (só no modo pin) */
    .svc-progress {
      display: none;
      align-self: stretch;
      width: 100%;
      height: 10px;
      background: var(--hairline-strong);
      overflow: hidden;
    }

    .svc-progress-fill {
      display: block;
      height: 100%;
      width: 0%;
      background: var(--color-primary);
      transition: width 0.12s linear;
    }

    /* ---- modo PIN (JS, desktop, sem prefers-reduced-motion) ---- */
    .svc-scroll.is-pinning .svc-scroll-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      justify-content: center;
      overflow: hidden;
      padding-block: var(--space-6);
    }

    .svc-scroll.is-pinning .svc-scroll-inner {
      height: 100%;
      justify-content: center;
    }

    .svc-scroll.is-pinning .svc-tabs {
      display: flex;
    }

    .svc-scroll.is-pinning .svc-progress {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 16px;
    }

    .svc-scroll.is-pinning .svc-panels {
      position: relative;
      flex: 1 1 auto;
      display: block;
    }

    /* no pin os painéis se sobrepõem e fazem crossfade (um por vez) */
    .svc-scroll.is-pinning .svc-panel {
      position: absolute;
      inset: 0;
      align-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.5s;
      pointer-events: none;
    }

    .svc-scroll.is-pinning .svc-panel.is-active {
      opacity: 1;
      visibility: visible;
      transform: none;
      pointer-events: auto;
    }

    @media (max-width: 768px) {
      .svc-panel {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      .svc-panels {
        gap: var(--space-7);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .svc-scroll.is-pinning .svc-panel {
        transition: none;
      }
    }

    /* ============================================================
       FRASE DE VALOR - camada azul "ao fundo" (sticky).
       A seção seguinte (Por Que Nós) tem fundo sólido e fica acima
       na pilha, então desliza POR CIMA da azul = overlap nítido.
       ============================================================ */
    .pin-stack {
      position: relative;
      /* era margin-top:-100vh (reveal Nubank com overlap). Desarmado: seção azul normal, sem prender o scroll. */
    }

    .svc-statement {
      position: relative;
      z-index: 0;
    }

    /* camada azul = 1 seção normal (não-sticky, ~até 1 tela), sem aprisionar o scroll */
    .svc-statement-inner {
      position: relative;
      min-height: 62vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
      padding: clamp(56px, 11vh, 120px) 0;
      /* o azul nasce gradual no topo: navy quase preto -> azul da marca em ~130px */
      background: linear-gradient(to bottom, #04081a 0%, #07204a 18%, var(--color-primary) 38%, var(--color-primary) 64%, #07204a 86%, #04081a 100%);
      text-align: center;
    }
    .svc-statement-cta { margin-top: clamp(26px, 4.5vh, 44px); }

    /* azul com nascimento gradual no topo (mesmo degradê do inner) */
    .svc-statement-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to bottom, #04081a 0%, #07204a 18%, var(--color-primary) 38%, var(--color-primary) 64%, #07204a 86%, #04081a 100%);
    }

    .svc-statement-text {
      position: relative;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(3rem, 8vw, 6.5rem);
      line-height: 1.04;
      letter-spacing: -0.02em;
      color: #fff;
      max-width: 16ch;
      margin: 0 auto;
      text-wrap: balance;
    }

    .svc-statement-em {
      color: #cfe0ff;
    }

    /* "Por Que Nós" passa por cima da camada azul */
    #por-que-nos {
      position: relative;
      z-index: 1;
      background: var(--color-bg);
    }

    /* ============================================================
       POR QUE A NEXUS
       ============================================================ */
    /* Introdução centralizada + timeline cascateada com linha central
       que se preenche de azul conforme o scroll percorre a seção. */
    .why-head {
      max-width: 720px;
      margin: 0 auto clamp(var(--space-6), 6vw, var(--space-8));
      text-align: center;
    }

    .why-head .section-title {
      margin-top: var(--space-3);
    }

    .why-head p {
      color: var(--color-text);
      font-size: 1.05rem;
      line-height: 1.65;
      margin-top: var(--space-4);
    }

    .why-flow {
      position: relative;
      max-width: 940px;
      margin: 0 auto;
    }

    /* trilho vertical central */
    .why-flow-track {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: var(--hairline-strong);
      border-radius: var(--radius-full);
      overflow: hidden;
    }

    /* preenchimento azul controlado por --progress (0 → 1) via JS */
    .why-flow-progress {
      position: absolute;
      inset: 0 0 auto 0;
      width: 100%;
      height: calc(var(--progress, 0) * 100%);
      background: linear-gradient(180deg, #4f9bff, var(--color-primary) 55%, var(--color-primary-hover));
      border-radius: var(--radius-full);
      will-change: height;
    }

    .why-steps {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: clamp(var(--space-6), 6vw, var(--space-8));
    }

    .why-step {
      position: relative;
      display: flex;
    }

    .why-step--right {
      justify-content: flex-end;
    }

    .why-step--left {
      justify-content: flex-start;
    }

    /* ponto sobre a linha central */
    .why-step-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 15px;
      height: 15px;
      transform: translate(-50%, -50%);
      border-radius: var(--radius-full);
      background: var(--color-bg);
      border: 2px solid var(--hairline-strong);
      z-index: 2;
      transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .why-step.is-active .why-step-dot {
      background: var(--color-primary);
      border-color: var(--color-primary);
      box-shadow: 0 0 0 4px rgba(12, 117, 251, 0.16);
    }

    .why-step-card {
      position: relative;
      isolation: isolate;
      width: calc(50% - clamp(var(--space-5), 4vw, var(--space-7)));
      background: #0d1017;
      border: 1px solid var(--hairline);
      border-radius: var(--radius-lg);
      padding: var(--space-5);
      overflow: hidden;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* conector curto ligando o card à linha central */
    .why-step-card::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: clamp(var(--space-4), 4vw, var(--space-6));
      height: 1px;
      background: var(--hairline-strong);
    }

    .why-step--right .why-step-card::after {
      left: calc(-1 * clamp(var(--space-4), 4vw, var(--space-6)));
    }

    .why-step--left .why-step-card::after {
      right: calc(-1 * clamp(var(--space-4), 4vw, var(--space-6)));
    }

    /* escuro até o scroll alcançar; clareia quando ativo (só com JS) */
    .why-flow.is-ready .why-step-card {
      opacity: 0.4;
      transition: opacity 0.5s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .why-flow.is-ready .why-step.is-active .why-step-card {
      opacity: 1;
    }

    .why-step.is-active .why-step-card {
      border-color: rgba(12, 117, 251, 0.35);
    }

    .why-step.is-active .why-step-card::after {
      background: var(--color-primary);
    }

    .why-step-card:hover {
      transform: translateY(-3px);
      border-color: var(--hairline-strong);
      box-shadow: var(--shadow-md);
    }

    /* aspas/glow azul muito sutil */
    .why-step-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: radial-gradient(120% 120% at var(--glow-x, 0%) 0%, rgba(12, 117, 251, 0.10), transparent 60%);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .why-step--right .why-step-card {
      --glow-x: 0%;
    }

    .why-step--left .why-step-card {
      --glow-x: 100%;
    }

    .why-step.is-active .why-step-card::before {
      opacity: 1;
    }

    .why-step-num {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--color-primary-soft);
    }

    .why-step-card h3 {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 2.4vw, 1.6rem);
      font-weight: 600;
      line-height: 1.25;
      margin-top: var(--space-3);
    }

    .why-step-card p {
      font-size: 0.95rem;
      color: var(--color-text-muted);
      line-height: 1.55;
      margin-top: var(--space-3);
    }

    /* ============================================================
       NÚMEROS
       ============================================================ */
    .numbers.section-screen {
      min-height: auto;
    }

    .numbers-intro {
      max-width: 720px;
      margin: 0 auto var(--space-5);
      text-align: center;
    }

    .numbers-intro p {
      margin-top: var(--space-3);
      color: var(--color-text);
      font-size: 1.05rem;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
      max-width: 640px;
      margin: 0 auto;
    }

    .stat {
      position: relative;
      text-align: center;
      padding: var(--space-3);
    }

    .stat-value {
      font-family: var(--font-display);
      font-size: clamp(3.4rem, 6vw, 5rem);
      font-weight: 700;
      line-height: 1;
      color: var(--color-primary);
      display: inline-block;
      transform-origin: center;
    }

    /* o número salta expandindo pra frente (escala) ao carregar */
    @keyframes nx-stat-pop {
      0% {
        transform: scale(0.35);
        opacity: 0;
      }

      60% {
        transform: scale(1.18);
        opacity: 1;
      }

      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .stat-value.is-pop {
      animation: nx-stat-pop 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* reflexo varrendo lentamente sobre o valor, após o salto */
    @keyframes nx-stat-shine {
      0% {
        background-position: 160% 0;
      }

      100% {
        background-position: -60% 0;
      }
    }

    .stat-value.is-shine {
      background: linear-gradient(100deg, var(--color-primary) 36%, #dcebff 48%, #ffffff 50%, #dcebff 52%, var(--color-primary) 64%);
      background-size: 220% 100%;
      background-position: 160% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      animation: nx-stat-shine 2.4s ease-out both;
    }

    @media (prefers-reduced-motion: reduce) {

      .stat-value.is-pop,
      .stat-value.is-shine {
        animation: none;
      }
    }

    .stat-label {
      margin-top: var(--space-3);
      color: var(--color-text-muted);
      font-size: 1.05rem;
    }

    /* ============================================================
       CREDENCIAIS (chips de competências na seção Quem Somos)
       ============================================================ */
    .cred-list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-4);
    }

    .cred-list li {
      display: inline-flex;
      align-items: center;
      padding: 6px 14px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--color-text);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--hairline-strong);
      border-radius: var(--radius-full);
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    .site-footer {
      background: var(--color-surface);
      border-top: 1px solid var(--hairline);
      padding: var(--space-7) 0 var(--space-5);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: var(--space-6);
    }

    .footer-logo {
      height: 38px;
      width: auto;
    }

    .footer-brand p {
      color: var(--color-text-muted);
      font-size: 0.95rem;
      margin-top: var(--space-3);
      max-width: 320px;
    }

    .footer-brand .footer-nap {
      font-weight: 600;
      color: var(--color-text);
    }

    .footer-col h2 {
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-text-strong);
      margin-bottom: var(--space-3);
    }

    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-col a {
      color: var(--color-text-muted);
      font-size: 0.95rem;
      transition: color 0.2s ease;
    }

    .footer-col a:hover,
    .footer-col a:focus-visible {
      color: var(--color-text-strong);
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-2);
      border-top: 1px solid var(--hairline);
      margin-top: var(--space-6);
      padding-top: var(--space-4);
      color: var(--color-text-muted);
      font-size: 0.85rem;
    }

    /* ============================================================
       FAQ
       ============================================================ */
    .faq-layout {
      max-width: 820px;
      margin-inline: auto;
    }

    .faq-head {
      text-align: center;
      margin-bottom: var(--space-6);
    }

    .faq-head h2 {
      font-family: var(--font-display);
      font-size: 2.5rem;
      line-height: 1.15;
    }

    .faq-head h2 .strong {
      color: var(--color-primary);
      display: block;
    }

    .faq-item {
      background: var(--color-elevated);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-3);
      overflow: hidden;
      transition: border-color 0.25s ease;
    }

    .faq-item:hover {
      border-color: rgba(12, 117, 251, 0.4);
    }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      text-align: left;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--color-text-strong);
      font-family: var(--font-body);
      font-size: 1.05rem;
      font-weight: 600;
      padding: var(--space-4);
      min-height: 56px;
    }

    .faq-question .chevron {
      flex: none;
      width: 22px;
      height: 22px;
      color: var(--color-primary);
      transition: transform 0.3s ease;
    }

    .faq-question[aria-expanded="true"] .chevron {
      transform: rotate(180deg);
    }

    /* abre/fecha via grid-rows: robusto a reflow (zoom de texto, rotação), sem JS medindo altura */
    .faq-answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s ease;
    }

    .faq-answer.open {
      grid-template-rows: 1fr;
    }

    .faq-answer-inner {
      overflow: hidden;
      min-height: 0;
      padding: 0 var(--space-4);
      color: var(--color-text);
    }

    .faq-answer.open .faq-answer-inner {
      padding-bottom: var(--space-4);
    }

    /* ============================================================
       CTA FINAL
       ============================================================ */
    .cta-final {
      position: relative;
      overflow: hidden;
      background: var(--color-primary);
      text-align: center;
    }

    .cta-card {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin-inline: auto;
      padding-block: var(--space-6);
    }

    .cta-card h2 {
      font-family: var(--font-display);
      font-size: clamp(2.3rem, 4.6vw, 3.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin-bottom: var(--space-4);
      color: #ffffff;
      text-wrap: balance;
    }

    .cta-card h2 .accent {
      color: #cfe0ff;
    }

    .cta-underline {
      position: relative;
      white-space: nowrap;
    }

    .cta-underline::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -0.12em;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 18%, #ffffff 82%, rgba(255, 255, 255, 0) 100%);
    }

    .cta-card p {
      max-width: 600px;
      margin: 0 auto var(--space-6);
      color: rgba(234, 242, 255, 0.9);
      font-size: 1.15rem;
      line-height: 1.6;
    }

    /* ============================================================
       FAB WHATSAPP
       ============================================================ */
    .fab-whatsapp {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 60px;
      height: 60px;
      border-radius: var(--radius-full);
      background: var(--color-whatsapp);
      box-shadow: var(--shadow-md);
      display: grid;
      place-items: center;
      z-index: 999;
      color: #fff;
      /* chama atenção ao carregar e depois para: movimento infinito cansa e distrai */
      animation: bounce 1.8s ease-in-out 4;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .fab-whatsapp:hover,
    .fab-whatsapp:focus-visible {
      background: var(--color-whatsapp-hover);
      animation-play-state: paused;
      transform: scale(1.08);
    }

    .fab-whatsapp svg {
      width: 32px;
      height: 32px;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-12px);
      }
    }

    /* ============================================================
       ANIMAÇÕES DE ENTRADA (scroll reveal)
       ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    .reveal[data-delay="1"] {
      transition-delay: 0.08s;
    }

    .reveal[data-delay="2"] {
      transition-delay: 0.16s;
    }

    .reveal[data-delay="3"] {
      transition-delay: 0.24s;
    }

    /* ============================================================
       RESPONSIVO - Tablet
       ============================================================ */
    @media (max-width: 1024px) {
      .about-layout {
        grid-template-columns: 1fr;
        gap: var(--space-5);
      }

      .about-visual {
        max-width: 560px;
        margin-inline: auto;
      }
    }

    /* ============================================================
       RESPONSIVO - Mobile (< 768px)
       ============================================================ */
    @media (max-width: 768px) {
      :root {
        --space-8: 56px;
        --gutter: 18px;
      }

      section {
        padding-block: var(--space-7);
      }

      /* O conteúdo define a altura: acabam as "telas cheias" forçadas e as lacunas vazias */
      .section-screen {
        min-height: 0;
        justify-content: flex-start;
      }

      /* ---- NAV / MENU MOBILE ---- */
      .nav-menu {
        position: fixed;
        inset: 60px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(5, 5, 6, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(210, 213, 216, 0.08);
        padding: var(--space-3) var(--gutter) var(--space-4);
        transform: translateY(-120%);
        transition: transform 0.3s ease;
        box-shadow: var(--shadow-lg);
        max-height: calc(100svh - 60px);
        overflow-y: auto;
        overflow-x: hidden;
      }

      .nav-menu.open {
        transform: translateY(0);
      }

      .nav-menu>li>a,
      .dropdown-toggle {
        min-height: 48px;
        display: flex;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid rgba(210, 213, 216, 0.06);
      }

      .nav-menu a::after {
        display: none;
      }

      /* dropdown vira lista inline e o texto SEMPRE quebra (some o corte lateral) */
      .has-dropdown {
        width: 100%;
      }

      .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        min-width: 0;
        max-width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: var(--space-2) 0 var(--space-3);
      }

      .dropdown-menu.open {
        display: block;
      }

      .has-dropdown:hover .dropdown-menu:not(.open) {
        opacity: 0;
        visibility: hidden;
      }

      .dropdown-menu li a {
        gap: 12px;
        padding: 12px 6px;
        min-height: 44px;
      }

      .dropdown-menu .ddi-title {
        white-space: normal;
        font-size: 0.95rem;
      }

      .dropdown-menu .ddi-sub {
        display: none;
      }

      /* CTA continua visível no mobile, em versão compacta */
      .nav-cta {
        min-height: 36px;
        padding: 8px 14px;
        font-size: 0.82rem;
      }

      .nav-cta-full {
        display: none;
      }

      .nav-cta-short {
        display: inline;
      }

      .nav-toggle {
        display: grid;
      }

      /* ---- HERO ---- */
      .hero {
        min-height: 0;
        padding-block: var(--space-6) var(--space-7);
        align-items: flex-start;
      }

      /* degradê vertical no mobile: o texto cai sempre sobre área escura, com mais contraste */
      .hero::before {
        background: linear-gradient(180deg, rgba(5, 5, 6, 0.82) 0%, rgba(5, 5, 6, 0.58) 40%, rgba(5, 5, 6, 0.86) 100%);
      }

      .hero-bg {
        background-position: 62% 38%;
      }

      .hero-inner {
        max-width: 100%;
      }

      .hero h1 {
        margin-bottom: var(--space-3);
      }

      .hero h1 .light {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 10px;
        color: var(--color-text);
      }

      .hero h1 .strong {
        font-size: 1.95rem;
        line-height: 1.14;
      }

      .hero h1 .light,
      .hero h1 .strong {
        white-space: normal;
      }

      .hero-sub {
        font-size: 1rem;
        line-height: 1.55;
        margin-bottom: var(--space-4);
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-proof {
        gap: 8px;
        margin-top: var(--space-5);
      }

      .hero-proof a {
        font-size: 0.78rem;
        padding: 7px 13px;
      }

      /* ---- MANIFESTO ---- */
      .manifesto {
        min-height: 180vh;
      }

      .manifesto-text {
        font-size: clamp(1.5rem, 6.6vw, 2.05rem);
        line-height: 1.3;
      }

      /* ---- TIPOGRAFIA DE SEÇÃO ---- */
      .section-title,
      .faq-head h2 {
        font-size: 1.7rem;
        line-height: 1.18;
      }

      .section-sub {
        font-size: 1rem;
      }

      .section-head {
        margin-bottom: var(--space-5);
      }

      /* ---- BARRA DE DIFERENCIAIS ---- */
      .feature-bar {
        padding-block: var(--space-4);
      }

      .feature-bar-list {
        gap: var(--space-3);
      }

      .feature-item .label {
        font-size: 1.05rem;
      }

      .feature-item .bar {
        height: 30px;
      }

      /* ---- QUEM SOMOS ---- */
      .about-text p {
        font-size: 1rem;
        line-height: 1.6;
      }

      .about-text p+p {
        margin-top: var(--space-3);
      }

      /* ---- SERVIÇOS ---- */
      .grid-services {
        grid-template-columns: 1fr;
      }

      .card {
        padding: var(--space-4);
      }

      .card-media {
        margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
        height: 168px;
      }

      .card h3 {
        font-size: 1.3rem;
      }

      /* ---- POR QUE A NEXUS (timeline) ---- */
      .why-flow-track {
        left: 7px;
        transform: none;
      }

      .why-step,
      .why-step--right,
      .why-step--left {
        justify-content: flex-end;
      }

      .why-step-card {
        width: calc(100% - var(--space-6));
        padding: var(--space-4);
      }

      .why-step-dot {
        left: 7px;
      }

      .why-step--right .why-step-card::after,
      .why-step--left .why-step-card::after {
        left: calc(-1 * var(--space-4));
        right: auto;
      }

      .why-step--left .why-step-card {
        --glow-x: 0%;
      }

      .why-steps {
        gap: var(--space-5);
      }

      /* ---- NÚMEROS: número e rótulo lado a lado (compacto) ---- */
      .stats {
        grid-template-columns: 1fr;
        gap: var(--space-3);
      }

      .stat {
        display: flex;
        align-items: center;
        text-align: left;
        gap: var(--space-4);
        padding: var(--space-4);
      }

      .stat-value {
        font-size: 3rem;
        flex: none;
        min-width: 2.2ch;
      }

      .stat-label {
        margin-top: 0;
        font-size: 1rem;
      }

      /* ---- FAQ ---- */
      .faq-head {
        margin-bottom: var(--space-5);
      }

      .faq-question {
        font-size: 1rem;
        padding: var(--space-3) var(--space-4);
        min-height: 52px;
      }

      .faq-answer-inner {
        font-size: 0.95rem;
      }

      /* ---- RODAPÉ ---- */
      .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
      }

      /* ---- CTA FINAL ---- */
      .cta-card {
        padding: var(--space-7) var(--space-3);
      }

      .cta-card h2 {
        font-size: clamp(1.9rem, 8vw, 2.5rem);
        letter-spacing: -0.015em;
      }

      .cta-card p {
        font-size: 1rem;
      }

      /* FAB um pouco menor e fora do caminho do conteúdo */
      .fab-whatsapp {
        width: 54px;
        height: 54px;
        bottom: 18px;
        right: 18px;
      }

      .fab-whatsapp svg {
        width: 28px;
        height: 28px;
      }
    }

    /* ============================================================
       RESPONSIVO - Telas estreitas (< 380px)
       ============================================================ */
    @media (max-width: 380px) {
      .hero h1 .strong {
        font-size: 1.72rem;
      }

      .section-title,
      .faq-head h2 {
        font-size: 1.55rem;
      }

      .stat-value {
        font-size: 2.3rem;
      }
    }

    /* Respeita usuários que preferem menos movimento */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }

      .reveal {
        opacity: 1;
        transform: none;
      }

      .feature-item.reveal {
        opacity: 1;
        transform: none;
      }

      .feature-item .label {
        -webkit-text-fill-color: var(--color-text-strong);
        color: var(--color-text-strong);
      }
    }

.robot-stage {
        position: relative;
        z-index: 2;
        background: var(--color-bg);
        padding: 0;
        overflow: hidden;
      }

      .robot-stage-frame {
        display: block;
        width: 100%;
        height: 100vh;
        height: 100svh;
        min-height: 680px;
        border: 0;
        background: transparent;
        color-scheme: dark;
      }

      /* MOBILE: robô não carrega (só carrossel). Altura-base (fallback) abaixo; o
         stage.html informa a altura real via postMessage e o JS encaixa exato (sem sobra). */
      @media (max-width: 900px) {
        .robot-stage-frame {
          height: 720px;
          min-height: 0;
        }
      }

      @media (max-width: 560px) {
        .robot-stage-frame {
          height: 760px;
        }
      }