/* ===== RESET & BASE ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      color: #111;
      background: #f2f1ef;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      --font-display: 'Sora', 'Inter', ui-sans-serif, system-ui;
      --font-body: 'Inter', 'Arial', ui-sans-serif, system-ui;
      --font-mono: 'Sora', 'Inter', ui-sans-serif, system-ui;
      /* Calha lateral. Tudo que sangra ate a borda (carrosseis de abas,
         legenda e cartoes de persona) desconta este valor, entao a calha
         muda num lugar so e os sangramentos acompanham. */
      --gutter: 40px;
    }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }

    /* ===== LAYOUT ===== */
    .container {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    section {
      padding: 64px 0;
      scroll-margin-top: 72px;
    }

    /* ===== TYPOGRAPHY ===== */
    .section-label {
      font-family: var(--font-display);
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.28px;
      text-transform: uppercase;
      margin-bottom: 12px;
      /* Eyebrow: muted gray, matching StudentHome's "Prática diária" label */
      display: inline-block;
      color: #9ca3af;
    }
    .section-title {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: -0.48px;
      color: #111;
      margin-bottom: 16px;
    }
    .section-subtitle {
      font-size: 1.125rem;
      color: #6b7280;
      max-width: 640px;
      margin-bottom: 32px;
    }
    .text-center { text-align: center; }
    .mx-auto { margin-left: auto; margin-right: auto; }

    /* ===== GRADIENT ACCENT BARS ===== */
    /* Brand accent: solid coral (#ff7759) */
    /* Full-width thin separator between sections */
    .gradient-bar {
      height: 3px;
      width: 100%;
      border: none;
      background: #ff7759;
    }
    /* Short centered accent rule, used under labels/titles */
    .gradient-rule {
      height: 3px;
      width: 56px;
      border: none;
      border-radius: 999px;
      margin: 0 auto 24px;
      background: #ff7759;
    }

    /* ===== BUTTONS ===== */
    .btn {
      background: #ff7759;
      color: #fff;
      border-radius: 999px;
      height: 56px;
      position: relative;
      font-size: 1.1rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      padding-left: 16px;
      padding-right: 64px;
      overflow: hidden;
      flex-shrink: 0;
    }
    /* Gradient overlay: faded out by default, faded in on hover.
       Opacity is animatable (unlike swapping a solid color for a gradient). */
    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #ff8f75 0%, #f2603f 100%);
      opacity: 0;
      z-index: 0;
      pointer-events: none;
      transition: opacity 1.2s ease; /* exit (back to solid) */
    }
    /* Hover (and mobile tap): fade the brand gradient in slowly */
    .btn:hover::before,
    .btn.btn-tap::before {
      opacity: 1;
      transition: opacity 2s ease; /* entrance */
    }
    .btn-badge {
      background: #fff;
      border-radius: 999px;
      height: 48px;
      width: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      right: 4px;
      top: 4px;
      transition: width 0.5s ease;
      z-index: 10;
      overflow: hidden;
    }
    .btn:hover .btn-badge {
      width: calc(100% - 8px);
      transition-delay: 0s;
    }

    /* Mobile tap animations — replicate desktop hover expand */
    @media (hover: none) {
      .btn { -webkit-tap-highlight-color: transparent; }
      .btn .btn-badge { transition: width 0.4s ease; }
      .btn-tap .btn-badge { width: calc(100% - 8px); }
    }
    .btn-label {
      color: #fff;
      position: relative;
      z-index: 1;
      pointer-events: none;
      white-space: nowrap;
    }
    .btn svg { flex-shrink: 0; }

    /* Inverted button (white bg on dark sections) */
    .btn-inverted {
      background: #fff;
      color: #111;
    }
    .btn-inverted .btn-badge { background: #111; }
    .btn-inverted .btn-label { color: #111; }
    .btn-inverted .btn-badge svg path { fill: #fff; }

    /* Full-width variant */
    .btn-full { width: 100%; }

    /* ===== HEADER / NAV ===== */
    .nav {
      position: relative;
      z-index: 3;            /* acima dos blobs/ruído do hero */
      background: transparent; /* herda o fundo do hero */
      padding: 0 0 72px;   /* menos espaço acima, mais espaço abaixo */
    }
    .nav .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }
    .nav-logo {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 400;
      letter-spacing: -0.48px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .nav-logo-mark { flex-shrink: 0; display: block; margin: -4px 0; }
    .nav-links {
      display: none;
      list-style: none;
      gap: 36px;
      align-items: center;
    }
    /* Links mais escuros que o cinza de legenda, com sublinhado coral que
       cresce da esquerda — o hover antes era só uma troca de cor. */
    .nav-links a {
      position: relative;
      display: inline-block;
      padding-bottom: 4px;
      font-size: 0.875rem;
      font-weight: 500;
      color: #4b5563;
      transition: color 0.2s ease;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 0;
      background: #ff7759;
      transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .nav-links a:hover { color: #111; }
    .nav-links a:hover::after { width: 100%; }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    @media (max-width: 639px) {
      .nav {
        /* mais respiro acima e abaixo do header do hero no mobile */
        padding: 20px 0 96px;
      }
      /* Logo à esquerda; CTA + hambúrguer juntos à direita. Antes o
         hambúrguer ficava centralizado entre os dois. */
      .nav .container {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .nav-right { margin-left: auto; gap: 8px; }
      .nav-logo { font-size: 1.375rem; }
    }
    /* .nav .btn.nav-cta: three classes → outranks `.hero .btn` (which comes
       later in the file), so the nav CTA keeps its own smaller label size
       instead of inheriting the page button size */
    .nav .btn.nav-cta {
      height: 42px;
      font-size: 0.9rem;
      padding-left: 14px;
      padding-right: 48px;
    }
    .nav-cta .btn-badge {
      height: 34px;
      width: 34px;
    }
    /* Alvo de toque de 44px, com as barras de 22px centradas dentro dele */
    .hamburger {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: #111;
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .mobile-menu {
      display: none;
      position: fixed;
      /* alinhado à base da nav do hero (12px do hero + 20px da nav + 44px do CTA) */
      top: 76px;
      left: 0; right: 0;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(12px);
      box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
      padding: 8px 20px 24px;
      z-index: 99;
      transform: translateY(-10px);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .mobile-menu.open {
      display: flex;
      flex-direction: column;
      transform: translateY(0);
      opacity: 1;
    }
    /* Itens de 56px em Sora — a folha aberta ganha a mesma voz do resto
       da página, e não parece uma lista de links comprimida. */
    .mobile-menu a {
      display: flex;
      align-items: center;
      height: 56px;
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 400;
      letter-spacing: -0.4px;
      color: #111;
      border-bottom: 1px solid #f3f4f6;
    }
    .mobile-menu a.mobile-menu-cta {
      border-bottom: none;
      margin-top: 16px;
      width: 100%;
      font-family: var(--font-body);
      font-size: 1.0625rem;
      font-weight: 500;
      letter-spacing: normal;
      padding-left: 24px;
      padding-right: 64px;
    }
    .mobile-menu a:last-of-type:not(.mobile-menu-cta) { border-bottom: none; }

    /* ===== STICKY HEADER (aparece quando a nav do hero some) ===== */
    .sticky-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      /* sombra difusa no lugar da borda de 1px, que cortava a página */
      box-shadow: 0 1px 0 rgba(17, 17, 17, 0.05), 0 8px 24px rgba(17, 17, 17, 0.06);
      /* escondido por padrão: deslizado pra cima e sem cliques */
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.35s ease,
                  visibility 0s linear 0.35s;
    }
    .sticky-header.is-visible {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.35s ease,
                  visibility 0s;
    }
    .sticky-header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    /* A marca encolhe de 24px para 19px na transição para a barra fixa */
    .sticky-header .nav-logo {
      font-family: var(--font-display);
      font-size: 1.1875rem;
      font-weight: 400;
      letter-spacing: -0.4px;
      gap: 3px;
    }
    .sticky-header .nav-logo-mark { width: 30px; height: 30px; }
    .sticky-header .nav-links {
      display: none;
      list-style: none;
      gap: 32px;
      align-items: center;
    }
    /* Régua de progresso de leitura, rente à base da barra */
    .sticky-progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: rgba(255, 119, 89, 0.14);
      overflow: hidden;
    }
    .sticky-progress span {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, #ff7759, #4d6ee5);
      background-repeat: no-repeat;
      transform-origin: left center;
    }
    .sticky-header .nav-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .sticky-header .btn.nav-cta {
      height: 38px;
      font-size: 0.8125rem;
      padding-left: 15px;
      padding-right: 44px;
    }
    .sticky-header .nav-cta .btn-badge {
      height: 32px;
      width: 32px;
      right: 3px;
      top: 3px;
    }
    /* hover: expande o badge (supera a regra de largura fixa acima, que empata
       em especificidade com .btn:hover .btn-badge e vencia por ordem no arquivo).
       O inset aqui e de 3px (nao 4px como no botao padrao), entao a largura
       expandida e 100% - 6px; com o calc herdado de 8px sobrava 5px a esquerda
       contra 3px a direita e a capsula ficava fora de centro. */
    .sticky-header .nav-cta:hover .btn-badge { width: calc(100% - 6px); }
    @media (max-width: 639px) {
      .sticky-header .container {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .sticky-header .nav-right { margin-left: auto; gap: 8px; }
      .sticky-header .btn.nav-cta { height: 44px; padding-right: 48px; }
      .sticky-header .nav-cta .btn-badge { height: 36px; width: 36px; right: 4px; top: 4px; }
      /* Este bloco vem depois das regras de hover/tap: reafirma a expansao,
         com o inset de 4px usado aqui. */
      .sticky-header .nav-cta:hover .btn-badge,
      .sticky-header .nav-cta.btn-tap .btn-badge { width: calc(100% - 8px); }
    }
    @media (min-width: 640px) {
      .sticky-header .container { display: flex; }
      .sticky-header .nav-links { display: flex; }
      .sticky-header .hamburger { display: none; }
    }

    /* ===== PLACEHOLDER ===== */
    .placeholder {
      background: #ececf0;
      border: 2px dashed #d1d5db;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9ca3af;
      font-size: 0.875rem;
      font-weight: 500;
    }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      overflow: hidden;
      padding-top: 12px;
      /* +72px de branco antes da proxima secao — o hero precisa acabar antes
         da emenda, nao encostar nela. */
      padding-bottom: 152px;
      text-align: center;
      background: #fff;
    }
    /* Noise overlay */
    .bg-hero-layer > .hero-noise {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.7;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    /* Fundo do hero: um unico gesto — um disco coral enorme subindo do canto
       inferior direito, com tres aneis concentricos neutros atras dele.
       Substituiu a familia de 16 linhas que abria pra cima: as linhas eram
       textura, o disco e forma — a dobra passa a ter uma silhueta propria em
       vez de um padrao de fundo.

       O disco vive fora da tela (centro em 1180,1010, raio 640): o que aparece
       e so o arco de cima, entao a forma cresce com a secao em vez de ser um
       circulo pousado no canto. Por isso 'xMidYMax slice' + background-size:
       cover — a arte e ancorada pela base e recortada nas laterais, mantendo a
       proporcao (com 'none' + 100% 100%, como no fundo anterior, o circulo
       viraria elipse em telas largas).

       Cor so no disco da frente (coral -> pessego, 7-15%) e no contorno dele
       (32%); os aneis de tras sao grafite a 9/6/4%, entao a repeticao nao
       vira mais laranja. */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221440%22%20height=%22960%22%20viewBox=%220%200%201440%20960%22%20preserveAspectRatio=%22xMidYMax%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22a%22%20x1=%220%22%20y1=%221%22%20x2=%220.35%22%20y2=%220%22%3E%3Cstop%20offset=%220%%22%20stop-color=%22%23ff7759%22%20stop-opacity=%220.15%22/%3E%3Cstop%20offset=%2260%%22%20stop-color=%22%23ff9a70%22%20stop-opacity=%220.1%22/%3E%3Cstop%20offset=%22100%%22%20stop-color=%22%23ffc79b%22%20stop-opacity=%220.07%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx=%221240%22%20cy=%221040%22%20r=%22416%22%20fill=%22url(%23a)%22/%3E%3Cg%20fill=%22none%22%20stroke-width=%221.5%22%3E%3Ccircle%20cx=%221240%22%20cy=%221040%22%20r=%22416%22%20stroke=%22%23ff7759%22%20stroke-opacity=%220.32%22/%3E%3Ccircle%20cx=%221240%22%20cy=%221040%22%20r=%22514%22%20stroke=%22%23111111%22%20stroke-opacity=%220.09%22/%3E%3Ccircle%20cx=%221240%22%20cy=%221040%22%20r=%22624%22%20stroke=%22%23111111%22%20stroke-opacity=%220.06%22/%3E%3Ccircle%20cx=%221240%22%20cy=%221040%22%20r=%22748%22%20stroke=%22%23111111%22%20stroke-opacity=%220.04%22/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      /* O arco morre antes da borda: sem isso ele era cortado no meio do voo
         pela emenda com a secao seguinte. */
      -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 96%);
              mask-image: linear-gradient(to bottom, #000 68%, transparent 96%);
    }
    /* Grao por cima do branco — sem ele o fundo chapa entre o disco e a nav. */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.55;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    /* Mobile: com 'cover' num hero estreito e alto a arte escalaria pela altura
       e o disco viraria uma mancha atras do texto. Aqui a arte ganha tamanho
       fixo e e ancorada pelo canto inferior direito — a crista do arco passa
       ~430px acima da base da secao, atras do celular. */
    @media (max-width: 1023px) {
      .hero::before {
        background-size: 1200px 800px;
        background-position: right -160px bottom -60px;
      }
    }
    .hero > .container { position: relative; z-index: 2; }
    @keyframes heroFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-60px); }
    }
    .hero .container {
      max-width: 1280px;
    }

    /* ===== REUSABLE HERO-STYLE BACKGROUND =====
       Mesmo fundo do hero (blobs azul + laranja flutuando + ruído) aplicável a
       qualquer seção. O fundo vive numa camada absoluta própria (.bg-hero-layer)
       em vez de overflow:hidden no <section>, pra não quebrar filhos sticky
       (ex.: colunas sticky). O conteúdo fica por cima. */
    .bg-hero { position: relative; }
    .bg-hero > .bg-hero-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;          /* clipa os blobs dentro da seção */
      pointer-events: none;
      background: #fff;
    }
    .bg-hero > .container { position: relative; z-index: 2; }
    /* Blobs radiais animados — espelham o hero */
    .bg-hero-layer::before,
    .bg-hero-layer::after {
      content: "";
      position: absolute;
      width: 170%;
      aspect-ratio: 1;
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }
    .bg-hero-layer::before {
      left: -60%;
      bottom: 20%;
      background: transparent;
      animation: heroFloat 9s ease-in-out infinite;
    }
    .bg-hero-layer::after {
      right: -60%;
      top: 20%;
      background: transparent;
      animation: heroFloat 11s ease-in-out infinite reverse;
    }
    @media (min-width: 1024px) {
      .bg-hero-layer::before,
      .bg-hero-layer::after { width: 90%; }
      .bg-hero-layer::before { left: -25%; bottom: 5%; }
      .bg-hero-layer::after  { right: -25%; top: 5%; }
    }
    /* Eyebrow do hero: régua coral + texto na cor da marca, no lugar do
       cinza de legenda que ele dividia com todas as outras seções. */
    .hero .section-label,
    .section-label--brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #ff7759;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.9px;
      margin-bottom: 18px;
    }
    .hero .section-label::before,
    .section-label--brand::before {
      content: "";
      display: block;
      width: 24px;
      height: 3px;
      border-radius: 999px;
      background: #ff7759;
      flex-shrink: 0;
    }
    .hero .section-title {
      font-size: 2.125rem;
      line-height: 1.12;
      letter-spacing: -1.1px;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
    @media (max-width: 639px) {
      .hero .section-label { font-size: 0.625rem; letter-spacing: 0.6px; gap: 8px; }
      .hero .section-label::before { width: 18px; }
    }
    /* Marca-texto coral sob a frase-chave da headline */
    .hero-mark {
      background: linear-gradient(transparent 72%, rgba(255, 119, 89, 0.28) 72%);
    }
    .hero .section-subtitle {
      font-size: 1rem;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 28px;
    }
    .hero .btn { font-size: 1.0625rem; padding-left: 24px; padding-right: 64px; }
    /* Azul do Telegram: a nota diz em qual app o acesso antecipado acontece,
       entao a cor faz metade do trabalho antes da frase ser lida. */
    .hero-cta-note {
      font-size: 0.8125rem;
      color: #229ed9;
      font-weight: 300;
      margin-top: 12px;
    }
    /* O icone acompanha o tamanho da linha e usa a mesma cor do texto. */
    .hero-cta-note .tg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.13em;
      margin-left: 0.25em;
      fill: currentColor;
    }
    /* Prova social na dobra — números que já existem na seção de credibilidade */
    .hero-proof {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 24px;
    }
    .hero-proof-faces { display: flex; }
    .hero-proof-faces img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
    }
    .hero-proof-faces img + img { margin-left: -10px; }
    .hero-proof p {
      font-size: 0.8125rem;
      line-height: 1.45;
      color: #6b7280;
    }
    .hero-proof strong { color: #111; font-weight: 600; }
    /* CTAs ganham uma elevação curta no hover */
    .btn { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(242, 96, 63, 0.32); }
    .btn-inverted:hover { box-shadow: 0 14px 32px rgba(17, 17, 17, 0.18); }
    /* O mock e desenhado para 320px de largura, mas o desktop o reduz para 240px.
       Com padding, gap e offsets em px fixo o conteudo nao encolhia junto e o
       telefone ficava com o interior espremido. Tudo que e espacamento vira
       unidade de container (1cqw = 1% da largura do proprio mock), entao a
       proporcao interna e identica em qualquer tamanho. */
    .hero-visual {
      margin-top: 56px;
      width: 100%;
      max-width: 320px;
      aspect-ratio: 406 / 835;
      margin-left: auto;
      margin-right: auto;
      background: #fff url('../img/phone/bg.png') center / cover no-repeat;
      border-radius: 32px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.10);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      /* container para o conteudo interno; o proprio border-radius NAO pode usar
         cqw, porque unidades de container em um container resolvem contra o
         ancestral, nao contra ele mesmo. */
      container-type: inline-size;
    }
    .phone-mock img { display: block; width: 100%; height: auto; }
    .pm-header { width: 94.1% !important; margin: 4.375cqw auto 0; --pm-rest: 5cqw; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.75s both; }
    .pm-chat {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4.375cqw;
      padding: 5cqw 4.375cqw;
      overflow: hidden;
      transform: translateY(5cqw);
    }
    .pm-data  { width: 10.1% !important; align-self: center;     --pm-rest: 0px; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.87s both; }
    .pm-m1ai  { width: 77.1% !important; align-self: flex-start; --pm-rest: 0px; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.99s both; }
    .pm-m1me  { width: 26.1% !important; align-self: flex-end;   --pm-rest: 0px; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 1.11s both; }
    .pm-m2ai  { width: 76.6% !important; align-self: flex-start; --pm-rest: 0px; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 1.23s both; }
    .pm-m2me  { width: 71.7% !important; align-self: flex-end;   --pm-rest: 0px; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 1.35s both; }
    .pm-m3ai  { width: 72.7% !important; align-self: flex-start; --pm-rest: 0px; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 1.47s both; }
    .pm-type  { width: 93.1% !important; margin: 0 auto 3.125cqw; --pm-rest: -7.5cqw; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 1.59s both; }
    .pm-footer { width: 100% !important; margin-top: auto; --pm-rest: -7.5cqw; animation: pmIn 0.6s cubic-bezier(0.22,1,0.36,1) 1.71s both; }
    @keyframes pmIn {
      from { opacity: 0; transform: translateY(calc(var(--pm-rest, 0px) + 7.5cqw)); }
      to   { opacity: 1; transform: translateY(var(--pm-rest, 0px)); }
    }

    /* ===== HERO STAGE (mockup + chat animado lado a lado no desktop) ===== */
    .hero-stage { width: 100%; margin-top: 48px; }
    /* Chat animado (iframe 5:4) — escondido no mobile, aparece só no desktop */
    .hero-chat {
      display: none;
      width: 100%;
      max-width: 540px;
      aspect-ratio: 5 / 4;
      border-radius: 24px;
      overflow: hidden;
      background: #f9f9f7;
      box-shadow: 0 24px 60px rgba(0,0,0,0.10);
    }
    .hero-chat iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* ===== PERSONAS ROSTER =====
       Era uma esteira de rostos anonimos em movimento: a headline prometia
       "cada persona e uma pessoa real" e a secao nao dava nem o nome. Agora sao
       cartoes legiveis com nome, idade, cidade e a bio que ja existe em
       src/data/personas/roster.md.

       Duas mudancas em cima disso:
       1) Mosaico. Os cartoes deixaram de ter todos o mesmo peso — ancora escuro
          largo, cartao-citacao largo, cartoes normais e fichas compactas. E a
          variacao de tamanho que da hierarquia a lista.
       2) Idioma explicito. Bandeira como selo no canto do retrato e no chip do
          rodape, mais a legenda de idiomas no topo. A secao vende cinco idiomas
          e mostrava so gente falando ingles.

       No mobile continua carrossel de arraste; a heterogeneidade vira largura
       de cartao em vez de span de grid. */
    .personas-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      align-items: end;
      text-align: left;
      margin-bottom: 28px;
    }
    .personas-head .section-title { margin-bottom: 0; }
    .personas-head-aside .section-subtitle { margin-bottom: 0; max-width: none; }

    /* Bandeiras desenhadas em SVG, nao emoji: no Windows o emoji de bandeira
       nao tem glifo e o navegador cai para as duas letras do pais ("DE"), o que
       quebraria a secao justo no sistema que a maior parte do publico usa.
       O arredondamento vem do CSS, nao de um rx no retangulo, porque assim
       recorta tambem as faixas da Union Jack que passam da borda. */
    .persona-flag {
      display: block;
      width: 20px;
      height: 14px;
      border-radius: 3px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .persona-flag--sm { width: 16px; height: 11px; border-radius: 2px; }

    /* Legenda: da o elenco por idioma antes dos cartoes, para o leitor nao
       precisar deduzir a cobertura persona a persona. Arrasta no mobile. */
    .personas-legend {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 calc(-1 * var(--gutter)) 24px;
      padding: 0 var(--gutter) 4px;
      scrollbar-width: none;
    }
    .personas-legend::-webkit-scrollbar { display: none; }
    .personas-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 500;
      color: #6b7280;
      background: #fff;
      border: 1px solid #ececf0;
      padding: 6px 12px 6px 8px;
      border-radius: 999px;
    }
    .personas-legend-count { color: #9ca3af; font-weight: 400; }

    .personas-grid {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      /* sem isto o snap encosta o 1o cartao na borda e come o respiro lateral */
      scroll-padding-left: var(--gutter);
      -webkit-overflow-scrolling: touch;
      padding: 4px var(--gutter) 8px;
      margin: 0 calc(-1 * var(--gutter));
      scrollbar-width: none;
    }
    .personas-grid::-webkit-scrollbar { display: none; }

    .persona-card {
      flex: 0 0 264px;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      gap: 14px;
      background: #fff;
      border: 1px solid #ececf0;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 8px 24px rgba(17, 17, 17, 0.05);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .persona-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(17, 17, 17, 0.09);
    }
    .persona-card--wide { flex-basis: 300px; }
    .persona-card--slim { flex-basis: 208px; gap: 12px; padding: 16px; }
    .persona-card--ink { background: #111; border-color: #111; }

    .persona-id { display: flex; align-items: center; gap: 14px; }
    /* Selo de bandeira no canto do retrato, como distintivo de origem: e lido
       antes do nome, que e exatamente a enfase de idioma que faltava. */
    .persona-av { position: relative; flex-shrink: 0; }
    .persona-av-badge {
      position: absolute;
      right: -3px;
      bottom: -3px;
      padding: 2px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(17, 17, 17, 0.18);
    }
    .persona-card--ink .persona-av-badge {
      background: #111;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
    }
    .persona-id img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }
    .persona-av-img--sm { width: 36px; height: 36px; }
    /* Monograma: fallback para quem ainda nao tem foto em avatar/.
       A inicial e melhor que um rosto generico. */
    .persona-mono {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ece9e4;
      color: #8a8175;
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 500;
    }
    .persona-mono--sm { width: 36px; height: 36px; font-size: 0.875rem; }
    .persona-card--ink .persona-mono { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.75); }

    .persona-id div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .persona-name {
      font-family: var(--font-display);
      font-size: 1.0625rem;
      font-weight: 500;
      letter-spacing: -0.2px;
      color: #111;
    }
    .persona-name--sm { font-size: 0.9375rem; }
    .persona-meta { font-size: 0.75rem; color: #9ca3af; }
    .persona-card--ink .persona-name { color: #fff; }
    .persona-card--ink .persona-meta { color: rgba(255,255,255,0.55); }

    .persona-bio {
      font-size: 0.8125rem;
      line-height: 1.55;
      color: #6b7280;
      flex: 1;
    }
    .persona-card--ink .persona-bio { color: rgba(255,255,255,0.66); }

    /* A frase no idioma-alvo com a traducao em cinza embaixo: e o segundo sinal
       de idioma, tipografico, reforcando a bandeira. */
    .persona-say { display: flex; flex-direction: column; gap: 6px; }
    .persona-say-line {
      font-family: var(--font-display);
      font-weight: 300;
      letter-spacing: -0.4px;
      font-size: 1.5rem;
      line-height: 1.25;
      color: #111;
      text-wrap: pretty;
    }
    .persona-card--ink .persona-say-line { color: #fff; }
    .persona-say-gloss { font-size: 0.75rem; color: #9ca3af; }
    .persona-card--ink .persona-say-gloss { color: rgba(255,255,255,0.45); }

    .persona-foot {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid #f3f4f6;
      font-size: 0.75rem;
      color: #9ca3af;
    }
    .persona-card--slim .persona-foot { padding-top: 10px; }
    .persona-card--ink .persona-foot { border-top-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); }
    /* O chip de idioma do rodape do cartao usa a cor da propria bandeira (os
       tokens --lang-* ficam no bloco "IDIOMAS"): cinza para todos apagava
       justamente o dado que a secao vende. */
    .persona-lang {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-display);
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      padding: 4px 9px 4px 5px;
      border-radius: 999px;
      background: var(--lang-soft, #f3f4f6);
      color: var(--lang-accent, #6b7280);
    }
    .persona-lang--text { padding-left: 9px; }
    /* No cartao escuro a versao suave sumiria: ali a cor vira o fundo cheio. */
    .persona-card--ink .persona-lang {
      background: var(--lang-accent, rgba(255,255,255,0.10));
      color: #fff;
    }

    .personas-more { margin-top: 24px; font-size: 0.875rem; color: #9ca3af; }

    @media (min-width: 768px) {
      .personas-legend { overflow: visible; flex-wrap: wrap; margin: 0 0 28px; padding: 0; }
      .personas-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        overflow: visible;
        padding: 0;
        margin: 0;
      }
      .persona-card { flex: initial; }
      .persona-card--wide { grid-column: span 2; }
    }
    @media (min-width: 1024px) {
      .personas-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 64px;
        margin-bottom: 36px;
      }
    }

    /* ===== MULTIPLATFORM ===== */
    .multiplatform {
      background: #f9f9f7;
    }
    .multiplatform-visual {
      height: 280px;
      max-width: 480px;
      margin: 0 auto 32px;
    }

    /* ===== FEATURE TABS (o que da pra fazer na conversa) =====
       Substitui o antigo carrossel de 7 iframes. O rotulo saiu de dentro do
       iframe e virou aba; so o painel ativo fica montado, num unico iframe,
       entao os outros seis loops de animacao deixam de rodar. */
    .feature-tabs {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }
    .feature-tab {
      font-family: var(--font-display);
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: -0.1px;
      background: #fff;
      color: #111;
      border: 1px solid #ececf0;
      border-radius: 999px;
      padding: 10px 18px;
      min-height: 44px;   /* alvo de toque, igual ao resto da pagina */
      cursor: pointer;
      white-space: nowrap;
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }
    .feature-tab:hover { border-color: #d6d3cd; }
    .feature-tab[aria-selected="true"] {
      background: #111;
      border-color: #111;
      color: #fff;
    }

    .feature-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      background: #fff;
      border: 1px solid #ececf0;
      border-radius: 24px;
      box-shadow: 0 8px 24px rgba(17, 17, 17, 0.05);
      overflow: hidden;
      text-align: left;
      margin-bottom: 28px;
    }
    .feature-panel-copy {
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .feature-panel-count {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.28px;
      text-transform: uppercase;
      color: #ff7759;
    }
    .feature-panel-count::after {
      content: "";
      height: 1px;
      flex-grow: 1;
      background: #e6e4df;
    }
    .feature-panel h3 {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: -0.4px;
      margin-bottom: 14px;
    }
    .feature-panel-text {
      font-size: 1rem;
      line-height: 1.6;
      color: #6b7280;
      margin-bottom: 28px;
      text-wrap: pretty;
    }
    .feature-panel-actions {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .feature-panel-nav {
      display: none;     /* no celular quem troca de aba e o swipe/os chips */
      gap: 12px;
      margin-left: auto;
    }
    .feature-panel-stage {
      background: #f2f1ef;
      border-top: 1px solid #ececf0;
      padding: 24px 20px;
    }
    .feature-panel-stage iframe {
      width: 100%;
      aspect-ratio: 5 / 4;
      border: none;
      display: block;
      border-radius: 16px;
    }
    @media (min-width: 768px) {
      .feature-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: stretch;
      }
      .feature-panel-copy {
        padding: 48px 44px;
        border-right: 1px solid #ececf0;
      }
      .feature-panel h3 { font-size: 1.6875rem; }
      .feature-panel-nav { display: flex; }
      .feature-panel-stage {
        border-top: none;
        padding: 40px;
        display: flex;
        align-items: center;
      }
      /* altura fixa em vez de 5/4: as cenas ja sao centradas no proprio
         documento, entao o 5/4 so gerava faixa vazia em volta da demo */
      .feature-panel-stage iframe { aspect-ratio: auto; height: 440px; }
    }
    /* Celular: a fila de abas rola na horizontal e sangra ate a borda da tela,
       pra deixar claro que ha mais abas do que cabem. */
    @media (max-width: 767px) {
      .feature-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: calc(-1 * var(--gutter));
        margin-right: calc(-1 * var(--gutter));
        padding: 0 var(--gutter) 4px;
        scroll-padding: 0 var(--gutter);
      }
      .feature-tabs::-webkit-scrollbar { display: none; }
      .feature-tab { flex: 0 0 auto; }
    }

    /* ===== MULTIPLATAFORMA NO CELULAR =====
       Tres coisas, todas abaixo de 768px (o mesmo ponto em que o painel deixa
       de ser duas colunas):

       1. A demo sobe pro topo do painel e sangra ate a borda do cartao. Antes
          ela so aparecia depois de cinco linhas de texto, com 293px de largura;
          agora abre com 333 e e a primeira coisa do painel.
       2. O painel ganha cabeca propria (.feature-panel-head, no HTML): as abas
          e a barra de cima saem da tela quando o painel entra em foco, entao o
          avanco automatico trocava tudo sem indicador nenhum.
       3. O CTA sai do painel — la ele se repetia nas sete abas — e vira um so,
          depois do painel.

       .hide-compact e irma de .hide-mobile, com breakpoint proprio: os cortes
       de copy daqui precisam acompanhar o painel (768px), nao a hero (640px). */
    .feature-panel-head { display: none; }
    .feature-cta-mobile { display: none; }
    .feature-tabs-label { display: none; }

    @media (max-width: 767px) {
      .hide-compact { display: none; }

      #multiplatform .section-label { font-size: 0.75rem; }
      #multiplatform .section-subtitle { font-size: 1rem; margin-bottom: 24px; }

      .feature-tabs-label {
        display: block;
        font-family: var(--font-display);
        font-size: 0.8125rem;
        font-weight: 500;
        color: #9ca3af;
        margin-bottom: 10px;
      }

      /* A barra solta acima das abas some: ela vive dentro do painel agora. */
      #feature-progress { display: none; }

      .feature-panel-head {
        display: block;
        order: -2;
        border-bottom: 1px solid #ececf0;
        padding: 14px 20px;
      }
      .feature-panel-head-top { display: flex; align-items: center; gap: 14px; }
      /* O contador ja tem uma regua que cresce no ::after: com flex-grow ela
         preenche ate as setas, entao a linha fecha sozinha. */
      .feature-panel-head .feature-panel-count { flex-grow: 1; margin-bottom: 0; }
      .feature-panel-nav-m { display: flex; gap: 8px; flex-shrink: 0; }
      /* Descendente de proposito: .carousel-progress fixa max-width 320px e
         margin auto, e a regra base aparece depois desta no arquivo — com um
         seletor de mesmo peso a barra da cabeca ficaria estreita e centrada. */
      .feature-panel-head .carousel-progress--panel { max-width: none; margin: 12px 0 0; }
      /* O contador de dentro da copy vira repeticao do que a cabeca ja diz. */
      .feature-panel-copy > #feature-count { display: none; }

      .feature-panel-stage {
        order: -1;
        border-top: none;
        border-bottom: 1px solid #ececf0;
        padding: 0;
      }
      .feature-panel-stage iframe { border-radius: 0; }

      .feature-panel-copy { padding: 24px 20px 28px; }
      .feature-panel-text { font-size: 0.9375rem; margin-bottom: 24px; }
      .feature-avail { margin: -14px 0 0; }
      .feature-panel-actions { display: none; }

      .feature-cta-mobile { display: block; margin-bottom: 28px; }
    }

    /* Status dos canais, logo abaixo do painel: a secao fala de canal no
       titulo, entao precisa dizer em algum lugar quais estao no ar. */
    .feature-channels {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 0.875rem;
      color: #6b7280;
    }
    /* Os dois canais deixaram de ser texto cinza: cada um usa a cor do proprio
       app, com o icone da marca, e a seta entre eles diz a ordem — testa no
       WhatsApp, continua no Telegram depois de assinar. O texto usa um tom
       mais fechado que a marca para nao perder contraste no fundo claro. */
    .feature-channels-live,
    .feature-channels-soon {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px 8px 12px;
      border-radius: 999px;
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: -0.1px;
      background: var(--channel-soft);
      border: 1px solid var(--channel-line);
      color: var(--channel-ink);
    }
    .feature-channels-live svg,
    .feature-channels-soon svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      fill: var(--channel-mark);
    }
    .feature-channels-live {
      --channel-mark: #25D366;
      --channel-ink: #0f7a3d;
      --channel-soft: rgba(37, 211, 102, 0.12);
      --channel-line: rgba(37, 211, 102, 0.38);
    }
    .feature-channels-soon {
      --channel-mark: #229ED9;
      --channel-ink: #17698f;
      --channel-soft: rgba(34, 158, 217, 0.12);
      --channel-line: rgba(34, 158, 217, 0.34);
    }
    .feature-channels-sep {
      display: inline-flex;
      color: #c7c9cf;
    }
    .feature-channels-sep svg { width: 18px; height: 18px; }
    @media (max-width: 767px) {
      .feature-channels { flex-direction: column; gap: 8px; text-align: center; }
      .feature-channels-sep svg { transform: rotate(90deg); }
    }
    /* Setas e barra de progresso, compartilhadas pelas abas de features
       (dentro do painel) e pelo carrossel de depoimentos. */
    .carousel-nav-btn {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid #ececf0;
      background: #fff;
      color: #111;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    }
    .carousel-nav-btn:disabled {
      opacity: .35;
      cursor: not-allowed;
    }
    .carousel-nav-btn:not(:disabled):hover {
      background: #111;
      border-color: #111;
      color: #fff;
    }
    .carousel-nav-btn svg {
      width: 20px;
      height: 20px;
    }
    .carousel-progress {
      position: relative;
      height: 4px;
      width: 100%;
      max-width: 320px;
      margin: 0 auto 32px;
      cursor: pointer;
    }
    /* área de clique mais alta que a barra de 4px, sem alterar o visual */
    .carousel-progress::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -12px;
      bottom: -12px;
    }
    .carousel-progress-bg-left,
    .carousel-progress-bg-right {
      position: absolute;
      top: 0;
      height: 100%;
      border-radius: 999px;
      background: rgba(17, 17, 17, 0.12);
      transition: width .3s cubic-bezier(.4, 0, .2, 1), left .3s cubic-bezier(.4, 0, .2, 1);
    }
    .carousel-progress-bg-left { left: 0; }
    .carousel-progress-bg-right { right: 0; }
    .carousel-progress-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: calc(100% / 5);
      border-radius: 999px;
      background: linear-gradient(90deg, #ff7759, #4d6ee5);
      transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    }

    /* ===== CREDIBILITY ===== */
    .stats-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      text-align: center;
    }
    .stat-number {
      font-size: 2.5rem;
      font-weight: 400;
      color: #111;
      line-height: 1;
      margin-bottom: 8px;
    }
    .stat-label {
      font-size: 0.9rem;
      color: #6b7280;
    }

    /* ===== CREDIBILITY — oculta no mobile ===== */
    @media (max-width: 639px) {
      #credibility { display: none; }
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 18px 8px 12px;
      background: #fff;
      color: #111;
      border: 1px solid #ececf0;
      border-radius: 999px;
      box-shadow: 0 2px 10px rgba(17, 17, 17, 0.05);
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: -0.1px;
      margin-bottom: 32px;
    }
    /* Brand-gradient dot to echo the pill buttons (coral → blue) */
    .badge::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #ff7759;
      box-shadow: 0 0 0 0 #ff775980;
      animation: badgePulse 2s ease-out infinite;
      flex-shrink: 0;
    }
    @keyframes badgePulse {
      0%   { box-shadow: 0 0 0 0 #ff775959; }
      70%  { box-shadow: 0 0 0 7px #ff775900; }
      100% { box-shadow: 0 0 0 0 #ff775900; }
    }
    /* ===== METHODOLOGY — MEIA SEÇÃO SANGRADA =====
       A seção deixa de ser duas colunas dentro do container e passa a dividir a
       largura da tela: imagem colada na borda esquerda, conteúdo à direita.
       É a única seção que rompe a moldura de 1120px — é isso que quebra a
       repetição visual do meio da página. No celular a divisão não existe: a
       imagem vira uma faixa no topo e o conteúdo vem inteiro embaixo. */
    .methodology {
      background: #fff;
      padding: 0;                       /* anula o padding padrão de section */
    }
    .methodology-split {
      position: relative;
      z-index: 2;                       /* acima do .bg-hero-layer */
      display: grid;
      grid-template-columns: 1fr;
    }
    /* Abaixo de 1024 a tira vertical nao existe: ela virava uma faixa de 300px
       que nao mostrava quadro nenhum inteiro. Cada quadro passa a morar dentro
       do topico a que pertence (.pillar-shot). */
    .methodology-media { display: none; }
    .methodology-body {
      display: flex;
      flex-direction: column;
      padding: 40px 36px 48px;
    }
    .methodology .section-title {
      font-size: 1.75rem;
      line-height: 1.18;
      margin-bottom: 14px;
    }
    .methodology .section-subtitle {
      font-size: 1rem;
      margin-bottom: 26px;
    }
    /* .methodology-body é flex column: sem align-self os pills inline-flex
       (eyebrow e badge) esticariam na largura toda da coluna. */
    .methodology .section-label,
    .methodology .badge { align-self: flex-start; }
    .methodology .badge { margin-bottom: 36px; }
    .methodology-cta { margin-top: 28px; align-self: flex-start; }

    /* Lista numerada 01–04 */
    .pillars-stack { display: flex; flex-direction: column; gap: 32px; }
    .pillar-card {
      display: grid;
      /* A foto ocupa a linha inteira; numero e texto seguem lado a lado como
         no desktop, sem mexer na ordem do DOM. */
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0 12px;
      background: none;
      border-radius: 0;
      box-shadow: none;
    }
    .pillar-shot {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 16px;
      background: #f1efea;
      margin-bottom: 14px;
    }
    .pillar-shot img { width: 100%; height: 100%; object-fit: cover; }
    .pillar-num {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.5px;
      color: #d6d3ce;
      transition: color 0.25s ease;
    }
    /* Numero e titulo na mesma linha de base (a foto, que ocupa a linha
       inteira acima, fica de fora do alinhamento). */
    .pillar-card > .pillar-num,
    .pillar-card > div:not(.pillar-shot) { align-self: baseline; }
    .pillar-card:hover .pillar-num { color: #ff7759; }
    .pillar-card h3 {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 400;
      letter-spacing: -0.35px;
      margin-bottom: 8px;
    }
    .pillar-card p {
      font-size: 0.9375rem;
      color: #6b7280;
      line-height: 1.55;
    }

    /* A partir de 1024px a divisão vertical existe. A coluna da imagem é uma
       fração (34%), não um valor fixo: é o que mantém a proporção da divisão em
       qualquer largura. Era 44%; encolheu pra que os quatro quadros da tira não
       dominassem a lista ao lado. */
    @media (min-width: 1024px) {
      .methodology-split {
        grid-template-columns: 34% minmax(0, 1fr);
        align-items: stretch;
      }
      /* Os dois cantos internos arredondam: e o que tira a aresta dura que a
         imagem fazia contra o branco do hero, em cima e embaixo. Fica no
         >=1024 porque e so aqui que a tira existe. */
      .methodology-media {
        display: block;
        position: relative;
        overflow: hidden;
        background: #f1efea;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
      }
      /* Absoluta: assim a altura natural dos quatro quadros nao estica a secao
         (sobrava um vazio embaixo do texto). Quem dita a altura e a coluna de
         texto; a tira preenche o que existe e cada quadro cede altura junto,
         em vez de o corte comer os das pontas. */
      .methodology-strip {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
      }
      .methodology-strip img {
        width: 100%;
        flex: 1 1 0;
        min-height: 0;
        object-fit: cover;
      }
      /* Fora do mobile as miniaturas somem: quem mostra os quadros e a tira. */
      .pillar-shot { display: none; }
      .methodology-body { padding: 68px 120px 68px 60px; }
      .methodology .section-title { font-size: 1.875rem; line-height: 1.2; }
      .pillars-stack { gap: 0; }
      .pillar-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 0 18px;
        padding: 22px 0;
        border-bottom: 1px solid #e6e4df;
      }
      .pillar-card:first-child { padding-top: 0; }
      .pillar-card:last-child { border-bottom: none; padding-bottom: 0; }
      .pillar-card > .pillar-num,
      .pillar-card > div:not(.pillar-shot) { align-self: start; }
      .pillar-num { font-size: 1.5rem; letter-spacing: -1px; }
      .pillar-card h3 { font-size: 1.25rem; }
      .methodology-cta { margin-top: 30px; }
    }
    /* Acima de 1440 o texto alinha com o container das outras seções: a borda
       direita do conteúdo cai nos mesmos 200px de margem. */
    @media (min-width: 1440px) {
      .methodology-body { padding: 76px 200px 76px 72px; }
      .methodology .section-title { font-size: 2rem; margin-bottom: 16px; }
      .methodology .section-subtitle { font-size: 1.0625rem; }
      .pillar-card { grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; padding: 26px 0; }
      .pillar-num { font-size: 1.75rem; }
      .pillar-card h3 { font-size: 1.375rem; }
      .methodology-cta { margin-top: 34px; }
    }

    /* ===== TESTIMONIALS — CARROSSEL DE VIDEO =====
       Eram cinco citacoes em texto (uma em destaque e quatro compactas).
       Viraram um carrossel: um depoimento em destaque (video 9:16 + citacao ao
       lado) e os DOIS seguintes em fila a direita, ja com a citacao legivel.
       Setas, cards da fila e a barra de progresso trocam o ativo.
       Sem JS a secao mostra o primeiro destaque e os dois primeiros da fila,
       entao ela nunca aparece vazia.

       ANTES DE PUBLICAR: cada .vt-poster / .vt-qthumb e um PLACEHOLDER. Trocar
       a <div> por um <video> de verdade, mantendo a classe:
         <video class="vt-poster" poster="/depoimentos/camila.jpg"
                preload="none" playsinline controls>
           <source src="/depoimentos/camila.mp4" type="video/mp4">
         </video>
       O 9:16 vem do CSS (aspect-ratio), entao o arquivo so precisa estar em
       9:16 de verdade; ao usar <video controls>, apagar o .vt-play decorativo. */
    .testimonials-head {
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-align: left;
      margin-bottom: 32px;
    }
    .testimonials-head .section-title { margin-bottom: 0; }
    .testimonials-note {
      font-size: 0.8125rem;
      color: #9ca3af;
      max-width: 240px;
    }

    /* Barra de controle: contador a esquerda, setas a direita.
       As setas reaproveitam .carousel-nav-btn do carrossel de features. */
    .vt-navrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .vt-counter {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      color: #9ca3af;
      margin-right: auto;
    }

    /* Palco: destaque em cima, fila embaixo. Vira duas colunas em >=1024px. */
    .vt-stage {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: stretch;
      text-align: left;
    }

    /* --- Destaque --- */
    .vt-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin: 0;
      padding: 20px;
      background: #fff;
      border: 1px solid #ececf0;
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(17, 17, 17, 0.04);
    }
    /* Os cinco depoimentos ficam no HTML; so o ativo aparece. Sem JS,
       cai no primeiro (:first-child); com JS, quem manda e o .is-on. */
    .vt-lead-item { display: none; }
    .vt-lead-item:first-child { display: flex; }
    .vt-js .vt-lead-item:first-child { display: none; }
    .vt-js .vt-lead-item.is-on { display: flex; }

    .vt-poster {
      position: relative;
      width: 220px;
      max-width: 100%;
      aspect-ratio: 9 / 16;
      flex-shrink: 0;
      border: none;
      border-radius: 12px;
      overflow: hidden;
      /* Placeholder: cor de cada depoimento vem do --vt-tint no HTML */
      background: radial-gradient(120% 90% at 30% 20%, var(--vt-tint, #3f3a34) 0%, #24201d 55%, #131110 100%);
    }
    .vt-poster-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      font-family: var(--font-mono);
      font-size: 0.625rem;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.5);
    }
    .vt-poster-cap {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 46px;
      margin: 0;
      font-size: 0.75rem;
      line-height: 1.35;
      color: #fff;
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
    }
    .vt-dur {
      position: absolute;
      left: 12px;
      bottom: 12px;
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      font-weight: 500;
      color: #fff;
      background: rgba(0, 0, 0, 0.42);
      padding: 3px 8px;
      border-radius: 999px;
    }
    /* Botao de play decorativo — sai quando o <video controls> entrar */
    .vt-play {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      border-radius: 999px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    }
    .vt-play svg { width: 20px; height: 20px; margin-left: 3px; }

    .vt-body {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0;
    }
    .vt-mark { display: block; margin-bottom: 18px; }
    .vt-card blockquote {
      flex: 0 0 auto;
      margin: auto 0;
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 1.32;
      letter-spacing: -0.34px;
      color: #111;
      text-wrap: pretty;
    }
    .vt-attr {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 22px 0 0;
      padding-top: 18px;
      border-top: 1px solid #f3f4f6;
    }

    /* --- Fila "A seguir" --- */
    .vt-queue {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
    }
    .vt-queue-label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      font-family: var(--font-display);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: #9ca3af;
    }
    .vt-queue-label::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #e5e5e8;
    }
    .vt-queue-list {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      min-height: 0;
    }
    .vt-qcard {
      display: none;
      gap: 14px;
      padding: 14px;
      min-width: 0;
      text-align: left;
      font: inherit;
      color: inherit;
      background: #fff;
      border: 1px solid #ececf0;
      border-radius: 16px;
      box-shadow: 0 8px 24px rgba(17, 17, 17, 0.04);
      cursor: pointer;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .vt-qcard:nth-child(2), .vt-qcard:nth-child(3) { display: flex; }
    .vt-js .vt-qcard { display: none; }
    .vt-js .vt-qcard.is-on { display: flex; }
    .vt-qcard:hover {
      border-color: #dcdce2;
      box-shadow: 0 12px 30px rgba(17, 17, 17, 0.08);
      transform: translateY(-2px);
    }
    .vt-qthumb {
      position: relative;
      width: 92px;
      aspect-ratio: 9 / 16;
      flex-shrink: 0;
      align-self: flex-start;
      border-radius: 10px;
      overflow: hidden;
      background: radial-gradient(120% 90% at 30% 20%, var(--vt-tint, #3f3a34) 0%, #24201d 55%, #131110 100%);
    }
    .vt-qthumb::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
    }
    .vt-qplay {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1.5px solid rgba(255, 255, 255, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vt-qplay svg { width: 11px; height: 11px; margin-left: 2px; }
    .vt-qdur {
      position: absolute;
      left: 8px;
      bottom: 8px;
      z-index: 1;
      font-family: var(--font-mono);
      font-size: 0.625rem;
      font-weight: 500;
      color: #fff;
    }
    .vt-qbody {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
      padding: 2px 2px 2px 0;
    }
    .vt-qquote {
      /* ocupa a altura livre e centraliza a citacao nela, como no destaque */
      flex: 1;
      display: flex;
      align-items: center;
      font-family: var(--font-display);
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.35;
      letter-spacing: -0.2px;
      color: #111;
      text-wrap: pretty;
    }
    .vt-qfoot {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid #f3f4f6;
    }

    /* Atribuicao: mesma anatomia das antigas .quote-card */
    .vt-mono {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #ececf0;
      color: #6b7280;
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .vt-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .vt-line { display: flex; align-items: center; gap: 8px; }
    .vt-name {
      font-family: var(--font-display);
      font-size: 0.9375rem;
      font-weight: 500;
      color: #111;
    }
    .vt-qcard .vt-name { font-size: 0.8125rem; }
    .vt-role { font-size: 0.75rem; color: #9ca3af; }
    .vt-qcard .vt-role { font-size: 0.6875rem; }
    .vt-level {
      margin-left: auto;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 999px;
      background: #fff1ed;
      color: #f2603f;
      font-family: var(--font-display);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    /* Barra de progresso: reaproveita .carousel-progress, so muda a margem.
       Os dois trechos cinza precisam de valor inicial explicito: partindo de
       `auto`, a primeira transicao nao interpola e a barra fica parada. */
    #testimonials .carousel-progress { margin: 32px auto 0; }
    #testimonials .carousel-progress-bg-left { width: 0; }
    #testimonials .carousel-progress-bg-right { left: 100%; }

    @media (min-width: 640px) {
      .testimonials-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
      .testimonials-note { text-align: right; padding-bottom: 8px; }
      /* Destaque deita: video a esquerda, citacao a direita */
      .vt-card { flex-direction: row; align-items: stretch; gap: 24px; padding: 24px; }
      .vt-poster { width: 240px; }
      .vt-body { padding: 6px 4px 2px 0; }
      .vt-card blockquote { font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.44px; }
      .vt-queue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 1024px) {
      .testimonials-head { margin-bottom: 44px; }
      .vt-stage { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; }
      .vt-poster { width: 300px; }
      .vt-card blockquote { font-size: 1.625rem; letter-spacing: -0.5px; }
      .vt-queue-list { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; }
      /* A miniatura estica ate a altura do card e o 9:16 define a largura,
         entao a fila fecha exatamente na mesma altura do destaque. */
      .vt-qthumb { width: auto; height: 100%; align-self: stretch; }
    }

    /* ===== PRICING ===== */
    .pricing {
      background: #f9f9f7;
    }
    .pricing-card {
      max-width: 480px;
      margin: 0 auto;
      padding: 40px 32px;
      background: #fff;
      border-radius: 20px;
      border: 2px solid #111;
      text-align: center;
    }
    .pricing-original {
      font-size: 1rem;
      color: #9ca3af;
      text-decoration: line-through;
      margin-bottom: 4px;
    }
    .pricing-amount {
      font-size: 3rem;
      font-weight: 400;
      color: #111;
      line-height: 1.1;
    }
    .pricing-amount span {
      font-size: 1rem;
      font-weight: 400;
      color: #6b7280;
    }
    .pricing-installments {
      font-size: 0.9rem;
      color: #6b7280;
      margin-bottom: 32px;
    }
    .pricing-features {
      list-style: none;
      text-align: left;
      margin-bottom: 32px;
    }
    .pricing-features li {
      padding: 10px 0;
      font-size: 0.95rem;
      color: #374151;
      border-bottom: 1px solid #f3f4f6;
    }
    .pricing-features li::before {
      content: "✓";
      font-weight: 400;
      margin-right: 10px;
      color: #111;
    }
    .pricing-daily {
      font-size: 0.85rem;
      color: #9ca3af;
      margin-top: 16px;
    }

    /* ===== PRICING: oferta + escala de custo ===== */
    .pricing-compare {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      max-width: 1000px;
      margin: 48px auto 0;
      align-items: stretch;
    }
    @media (min-width: 768px) {
      .pricing-compare {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 56px;
      }
    }
    .compare-banner {
      border-radius: 20px;
      padding: 36px 32px;
      text-align: left;
      display: flex;
      flex-direction: column;
    }
    /* Left: ReyBro */
    .compare-hero {
      background: #ff7759;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    /* Mesmo grao do painel de CTA — sem ele o coral chapa numa area desse
       tamanho. A sombra saiu junto: o bloco se sustenta pela cor, como no fecho. */
    .compare-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.35;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .compare-hero > * { position: relative; z-index: 1; }
    .compare-hero .compare-name { color: #fff; }
    .compare-hero .compare-price { color: #fff; }
    .compare-hero .compare-price span { color: rgba(255,255,255,0.8); }
    .compare-hero .compare-list li { color: #fff; border-bottom-color: rgba(255,255,255,0.18); }
    /* Tique de traco fino em vez do circulo verde: o coral passa a ser a
       unica cor saturada da secao. */
    .compare-hero .compare-list li::before {
      content: "";
      flex-shrink: 0;
      width: 17px;
      height: 17px;
      margin-right: 12px;
      margin-top: 3px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 10.5 8 14.5 16 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    /* Direita: escala de custo de um ano de pratica.
       Barras na proporcao real dos valores — a do ReyBro ocupa 8% da do tutor,
       que e o argumento que a lista de bullets levava meio minuto pra dizer. */
    .price-scale {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
    }
    .price-scale-label {
      font-family: var(--font-display);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: #9ca3af;
      margin-bottom: 6px;
    }
    .price-scale-intro {
      font-size: 0.9375rem;
      color: #6b7280;
      max-width: 480px;
      margin-bottom: 32px;
    }
    .bar-rows {
      display: flex;
      flex-direction: column;
      gap: 26px;
    }
    .bar-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .bar-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
    }
    .bar-name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 500;
      color: #111;
    }
    .bar-value {
      font-family: var(--font-display);
      font-size: 1rem;
      color: #6b7280;
      white-space: nowrap;
    }
    .bar-track {
      height: 40px;
      background: #f4f4f2;
      border-radius: 8px;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: 8px;
      background: #dcdcd8;
    }
    .bar-note {
      font-size: 0.8125rem;
      color: #9ca3af;
    }
    .bar-row--hero .bar-value { color: #ff7759; }
    .bar-row--hero .bar-fill { background: linear-gradient(90deg, #ff8f75 0%, #f2603f 100%); }
    .price-scale-foot {
      margin-top: 36px;
      padding-top: 22px;
      border-top: 1px solid #ececf0;
      font-size: 0.9375rem;
      color: #6b7280;
    }
    .price-scale-source {
      margin-top: 12px;
      font-size: 0.75rem;
      line-height: 1.5;
      color: #9ca3af;
    }
    .price-scale-foot strong {
      font-family: var(--font-display);
      font-weight: 400;
      color: #111;
    }
    .compare-name {
      font-size: 1.05rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .compare-price {
      font-size: 3rem;
      font-weight: 400;
      line-height: 1;
      margin-bottom: 4px;
    }
    /* Preco e parcela lado a lado, separados por uma divisoria. A parcela
       como nota de rodape do valor anual passava batido: ela ficava com o
       mesmo peso da trava de preco e dos bullets logo abaixo, e o olho
       pulava do numero grande direto pro botao branco. */
    .price-split {
      display: flex;
      align-items: stretch;
      gap: 18px;
      margin-bottom: 18px;
    }
    .price-split .compare-price {
      font-size: 2.75rem;
      margin-bottom: 0;
    }
    .split-rule {
      width: 1px;
      background: rgba(255, 255, 255, 0.30);
      flex-shrink: 0;
    }
    .split-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .split-parcela {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1.2;
      color: #fff;
      white-space: nowrap;
    }
    .split-label {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.8);
      margin-top: 2px;
    }
    /* Nao cabem lado a lado num card de ~246px de conteudo: abaixo disso a
       divisoria vira uma linha horizontal e os dois empilham. */
    @media (max-width: 560px) {
      .price-split {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
      .split-rule { width: 100%; height: 1px; }
    }
    .compare-price span {
      font-size: 1rem;
    }
    .compare-monthly {
      font-size: 0.85rem;
      margin-top: 14px;
      text-align: center;
    }
    .compare-list {
      list-style: none;
      margin: 0 0 24px;
      flex: 1;
    }
    /* Um badge so para os cinco itens: o checklist le como um argumento
       ("o que esta incluso") em vez de cinco linhas soltas sobre o coral.
       As divisorias de 1px separam dentro do bloco; a ultima sai, senao
       fica uma linha encostada na borda de baixo. */
    .compare-hero .compare-list {
      background: rgba(255, 255, 255, 0.13);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 12px;
      padding: 4px 16px;
    }
    .compare-hero .compare-list li:last-child { border-bottom: none; }
    .compare-list li {
      display: flex;
      align-items: flex-start;
      padding: 11px 0;
      font-size: 0.95rem;
      line-height: 1.4;
    }
    .compare-hero .btn-full { margin-top: auto; }
    /* ReyBro CTA: no gradient overlay on hover (desktop) or tap (mobile) */
    .compare-cta::before { display: none; }
    .compare-cta:hover::before,
    .compare-cta.btn-tap::before { opacity: 0; }
    .compare-hero .compare-monthly { color: rgba(255,255,255,0.85); }

    /* ===== APP CTA ===== */
    .app-cta {
      background: #111;
      color: #fff;
      text-align: center;
    }
    .app-cta .section-title { color: #fff; }
    .app-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-top: 32px;
    }
    .btn-app-store {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 28px;
      background: #fff;
      color: #111;
      border-radius: 12px;
      font-weight: 600;
      font-size: 0.95rem;
    }
    .btn-app-store .store-icon {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn-app-store .store-icon svg {
      width: 26px;
      height: 26px;
    }
    .btn-app-store .store-text {
      display: flex;
      flex-direction: column;
      text-align: left;
      line-height: 1.2;
    }
    .btn-app-store .store-text small {
      font-size: 0.7rem;
      font-weight: 400;
      opacity: 0.7;
    }
    .btn-app-store .store-text strong {
      font-size: 1rem;
      font-weight: 600;
    }

    /* ===== CTA CLOSING =====
       O fecho era um titulo solto sobre branco com o mesmo botao repetido pela
       quarta vez — nao parava o olho. Agora a marca ocupa o ultimo bloco
       inteiro: painel coral, headline em 3.5rem e o botao branco em contraste
       maximo. Depois de uma pagina toda clara, o bloco de cor e o ponto final. */
    .cta-closing {
      padding-top: 112px;
      background: #fff;
    }
    .cta-panel {
      position: relative;
      overflow: hidden;
      border-radius: 40px;
      background: #ff7759;
      padding: 72px 64px;
      text-align: left;
    }
    /* Aneis brancos ecoando o disco do hero, ancorados no canto inferior direito */
    .cta-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1120'%20height='540'%20viewBox='0%200%201120%20540'%20preserveAspectRatio='xMidYMax%20slice'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.5'%20stroke-opacity='0.28'%3E%3Ccircle%20cx='900'%20cy='620'%20r='300'/%3E%3Ccircle%20cx='900'%20cy='620'%20r='400'/%3E%3Ccircle%20cx='900'%20cy='620'%20r='510'/%3E%3Ccircle%20cx='900'%20cy='620'%20r='630'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }
    /* Mesmo grao do hero — sem ele o coral chapa numa area desse tamanho */
    .cta-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: 0.35;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .cta-panel > * { position: relative; z-index: 2; }
    /* Eyebrow e titulo invertem para o branco dentro do painel */
    .cta-closing .section-label--brand { color: #fff; opacity: 0.85; }
    .cta-closing .section-label--brand::before { background: #fff; }
    .cta-closing .section-title {
      font-size: 3.5rem;
      line-height: 1.04;
      letter-spacing: -2px;
      color: #fff;
      max-width: 14ch;
      margin-bottom: 0;
      text-wrap: balance;
    }
    /* Rodape do painel: promessa a esquerda, acao a direita */
    .cta-foot {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
      margin-top: 40px;
    }
    .cta-foot-copy {
      display: flex;
      flex-direction: column;
      gap: 14px;
      /* A base 'auto' faz a coluna nascer do proprio conteudo (o paragrafo tem
         limite de 44ch e os chips de idioma cabem numa linha so). Com grow 1 ela
         tomava a linha inteira e empurrava a acao para baixo, colada a esquerda;
         sem grow a acao volta para o lado direito do rodape. */
      flex: 0 1 auto;
      min-width: 0;
    }
    .cta-closing .section-subtitle {
      color: #fff;
      opacity: 0.92;
      font-size: 1.0625rem;
      margin: 0;
      max-width: 44ch;
    }
    .cta-langs {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 500;
      color: #fff;
      opacity: 0.8;
    }
    .cta-langs .cta-dot { opacity: 0.5; }
    .cta-action {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 14px;
      /* Encosta o bloco na borda direita do painel, inclusive quando o rodape
         quebra em duas linhas em telas medias. */
      margin-left: auto;
      flex: 0 1 auto;
      text-align: right;
    }
    /* Botao um degrau maior que o padrao — e o ultimo clique da pagina */
    .cta-closing .btn {
      height: 64px;
      font-size: 1.1875rem;
      padding-left: 30px;
      padding-right: 76px;
      box-shadow: 0 18px 44px rgba(120, 40, 20, 0.28);
    }
    .cta-closing .btn .btn-badge { height: 56px; width: 56px; }
    /* As regras acima sao mais tardias que .btn:hover, entao o badge nao
       expandia e a sombra nao mudava. Repetidas aqui com o mesmo prefixo para
       o hover ficar identico ao dos outros botoes da pagina. */
    .cta-closing .btn:hover .btn-badge { width: calc(100% - 8px); }
    .cta-closing .btn:hover { box-shadow: 0 14px 32px rgba(17, 17, 17, 0.18); }
    @media (hover: none) {
      .cta-closing .btn.btn-tap .btn-badge { width: calc(100% - 8px); }
    }
    .cta-note {
      font-size: 0.9375rem;
      color: #fff;
      opacity: 0.85;
      margin: 0;
      max-width: 44ch;
    }
    @media (max-width: 767px) {
      .cta-closing { padding-top: 72px; }
      .cta-panel { border-radius: 28px; padding: 44px 24px; }
      .cta-closing .section-title { font-size: 2.125rem; letter-spacing: -0.9px; max-width: none; }
      .cta-foot { margin-top: 32px; gap: 28px; }
      .cta-foot-copy { max-width: none; }
      .cta-action { align-self: stretch; align-items: stretch; margin-left: 0; text-align: center; }
      .cta-closing .btn { height: 60px; font-size: 1.0625rem; padding-left: 24px; padding-right: 72px; }
      .cta-closing .btn .btn-badge { height: 52px; width: 52px; }
      /* Regra mobile vem depois do hover global: reafirma a expansao aqui. */
      .cta-closing .btn:hover .btn-badge,
      .cta-closing .btn.btn-tap .btn-badge { width: calc(100% - 8px); }
      .cta-note { text-align: center; max-width: none; }
    }

    /* ===== FAQ ===== */
    .faq {
      background: #f9f9f7;
    }
    .faq .section-title {
      font-size: 2.16rem;
      max-width: 30ch;
      margin-left: auto;
      margin-right: auto;
      text-wrap: balance;
    }
    .faq-list {
      max-width: 740px;
      margin: 0 auto;
      border-top: 1px solid #e6e4df;
      text-align: left;
    }
    .faq-item {
      border-bottom: 1px solid #e6e4df;
      padding: 26px 4px;
    }
    /* Grade de tres colunas: numero, pergunta, sinal de + */
    .faq-question {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 32px;
      align-items: baseline;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.35;
      letter-spacing: -0.2px;
      color: #111;
      cursor: pointer;
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      padding: 0;
      text-wrap: pretty;
    }
    .faq-num {
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.5px;
      color: #9ca3af;
      transition: color 0.3s ease;
    }
    .faq-item.open .faq-num { color: #ff7759; }
    .faq-question::after {
      content: "+";
      font-size: 1.5rem;
      font-weight: 300;
      line-height: 1;
      color: #9ca3af;
      justify-self: end;
      transition: color 0.3s ease;
    }
    .faq-item.open .faq-question::after { color: #ff7759; }
    .faq .gradient-rule { margin-bottom: 16px; }
    .faq-foot {
      text-align: center;
      font-size: 0.9375rem;
      color: #9ca3af;
      margin-top: 36px;
      text-wrap: pretty;
    }
    .faq-foot a { color: #ff7759; }
    @media (max-width: 767px) {
      .faq .section-title { font-size: 1.43rem; }
      .faq-list { max-width: 100%; }
      .faq-item { padding: 18px 0; }
      .faq-question {
        grid-template-columns: 34px minmax(0, 1fr) 24px;
        gap: 6px;
        min-height: 44px;
        font-size: 0.99rem;
        font-style: italic;
      }
      .faq-num { font-size: 0.75rem; }
      .faq-question::after { font-size: 1.375rem; }
      .faq-foot { font-size: 0.875rem; }
    }
    /* FAQ: fundo sólido #F9FAFB (em vez do gradiente que termina em #fff) */
    .faq .bg-hero-layer { background: #f2f1ef; }
    /* FAQ mobile: blobs menos intensos + laranja mais para cima */
    @media (max-width: 1023px) {
      .faq .bg-hero-layer::before {
        background: transparent;
      }
      .faq .bg-hero-layer::after {
        background: transparent;
        top: 0%;
      }
    }
    /* FAQ desktop: apenas laranja mais para cima */
    @media (min-width: 1024px) {
      .faq .bg-hero-layer::after { top: -20%; }
    }

    /* ===== CONTACT ===== */
    .contact {
      background: #111;
      color: #fff;
      text-align: center;
    }
    .contact .section-title { color: #fff; }
    .contact .section-subtitle { color: #9ca3af; margin-left: auto; margin-right: auto; }
    .contact-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      max-width: 640px;
      margin: 0 auto;
    }
    .contact-card {
      padding: 32px 24px;
      background: #1f1f1f;
      border-radius: 16px;
      text-align: center;
    }
    .contact-card h3 {
      font-size: 1.125rem;
      font-weight: 400;
      margin-bottom: 8px;
      color: #fff;
    }
    .contact-card p {
      font-size: 0.9rem;
      color: #9ca3af;
      margin-bottom: 20px;
      line-height: 1.5;
    }
    .contact-card .btn { margin-top: 8px; }

    /* ===== FOOTER ===== */
    .footer {
      background: #fff;
      padding: 32px 0 40px;
      text-align: center;
    }
    .footer-copy {
      font-size: 0.75rem;
      color: #9ca3af;
    }

    /* ===== RESPONSIVE: HERO NO CELULAR =====
       A hero tinha 1614px de altura num visor de 844px: o mockup do celular
       so comecava em y=856, entao a primeira tela era texto e mais nada. O
       bloco abaixo tira ~560px sem mexer em hierarquia — mesma composicao,
       so o respiro corrigido. Nada aqui vaza para tablet/desktop.

       Peca auxiliar: .hide-mobile marca os trechos de copy que existem no
       desktop e saem no celular (a terceira frase do subtitulo, a cauda do
       badge, o verbo do CTA da nav). E corte de copy, nao duplicacao de
       marcacao — o texto continua um so no HTML. */
    @media (max-width: 639px) {
      .hide-mobile { display: none; }

      /* 40px de calha em 390px de tela comiam 20% da largura e era isso que
         espremia a headline em 4 linhas. Vale para a pagina toda: gutter
         diferente na hero e no resto criaria uma emenda visivel. */
      body { --gutter: 20px; }

      /* Eram 158px de header (96px so de respiro embaixo) antes do primeiro
         pixel de conteudo. */
      .nav { padding: 16px 0 40px; }
      .nav .btn.nav-cta { height: 40px; font-size: 0.875rem; padding-right: 44px; }
      .nav .nav-cta .btn-badge { height: 32px; width: 32px; }
      /* O CTA completo reaparece 600px abaixo, identico: no header basta o
         nome do app. */
      .nav-cta-verb { display: none; }
      /* Acompanha a nav mais baixa: 12px do hero + 16px da nav + 40px do CTA. */
      .mobile-menu { top: 68px; }

      .hero .section-title {
        font-size: clamp(1.875rem, 8.5vw, 2.0625rem);
        letter-spacing: -1px;
        text-wrap: balance;
      }
      .hero .section-subtitle {
        font-size: 0.9375rem;
        margin-bottom: 24px;
        text-wrap: pretty;
      }

      /* Com a calha menor o celular cresceria junto (a altura sai da largura
         pela proporcao 406/835), devolvendo a altura que acabamos de tirar. */
      .hero-visual { max-width: 300px; margin-top: 48px; }
      .hero { padding-bottom: 96px; }
    }

    /* ===== RESPONSIVE: TABLET ===== */
    @media (min-width: 640px) {
      .hero .section-title { font-size: 2.5rem; letter-spacing: -0.72px; }
      .section-title { font-size: 2.25rem; }
      .stats-grid { grid-template-columns: 1fr 1fr 1fr; }
      .app-buttons { flex-direction: row; justify-content: center; }
      .contact-cards { grid-template-columns: 1fr 1fr; }
    }

    /* ===== RESPONSIVE: TABLET+ NAV ===== */
    @media (min-width: 640px) {
      .nav .container { display: flex; }
      .nav-links { display: flex; }
      .hamburger { display: none; }
    }

    /* ===== RESPONSIVE: DESKTOP ===== */
    @media (min-width: 1024px) {
      .container { max-width: 1280px; }
      .hero .section-title { font-size: 2.75rem; letter-spacing: -0.72px; }
      section { padding: 96px 0; }
      @keyframes heroFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-110px); }
      }

    }

    /* ===== IDIOMAS — SINALIZACAO MULTI-IDIOMA =====
       A pagina vende cinco idiomas mas so a secao de personas mostrava isso.
       Aqui ficam as pecas reaproveitaveis (bandeira solta, chip com nome e
       pilha sobreposta) usadas no hero, na metodologia, no preco, no FAQ e no
       CTA final. Nada muda de estrutura: cada peca entra dentro de um bloco
       que ja existia.

       As cores saem da propria bandeira e foram escolhidas para nao colidirem
       entre si — o alemao usa o preto da faixa, nao o vermelho, que ficaria
       igual ao do ingles. */
    .lang-en { --lang-accent: #C8102E; --lang-soft: rgba(200, 16, 46, 0.10); --lang-line: rgba(200, 16, 46, 0.28); }
    .lang-es { --lang-accent: #B98400; --lang-soft: rgba(241, 191, 0, 0.16); --lang-line: rgba(185, 132, 0, 0.32); }
    .lang-fr { --lang-accent: #0055A4; --lang-soft: rgba(0, 85, 164, 0.10); --lang-line: rgba(0, 85, 164, 0.26); }
    .lang-it { --lang-accent: #007A3D; --lang-soft: rgba(0, 140, 69, 0.10); --lang-line: rgba(0, 140, 69, 0.26); }
    .lang-de { --lang-accent: #1f2430; --lang-soft: rgba(31, 36, 48, 0.08); --lang-line: rgba(31, 36, 48, 0.22); }

    /* Mesma bandeira SVG das personas, agora com nome proprio porque passou a
       ser usada fora daquela secao. Emoji continua fora de questao: no Windows
       a bandeira nao tem glifo e o navegador cai para as duas letras do pais. */
    .lang-flag {
      display: block;
      width: 20px;
      height: 14px;
      border-radius: 3px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .lang-flag--sm { width: 16px; height: 11px; border-radius: 2px; }
    .lang-flag--xs { width: 14px; height: 10px; border-radius: 2px; }

    /* Fileira de chips: bandeira + nome do idioma, cada um na sua cor. */
    .lang-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .lang-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 13px 6px 8px;
      border-radius: 999px;
      background: var(--lang-soft, #fff);
      border: 1px solid var(--lang-line, #ececf0);
      font-family: var(--font-display);
      font-size: 0.78125rem;
      font-weight: 500;
      letter-spacing: -0.1px;
      color: var(--lang-accent, #111);
      white-space: nowrap;
    }
    .lang-chip--sm { padding: 5px 11px 5px 7px; font-size: 0.75rem; gap: 6px; }

    /* Pilha sobreposta: entra onde cinco chips nao caberiam — dentro do badge,
       de um item de lista, da legenda de uma barra. O anel branco separa uma
       bandeira da outra. */
    .lang-stack {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      flex-shrink: 0;
    }
    /* 16x11 com -4px de sobreposicao: sobra 12px visiveis de cada bandeira,
       que e o minimo para o desenho ainda ser reconhecivel. */
    .lang-stack .lang-flag {
      width: 16px;
      height: 11px;
      border-radius: 2px;
      margin-left: -4px;
      box-shadow: 0 0 0 1.5px #fff;
    }
    .lang-stack .lang-flag:first-child { margin-left: 0; }

    /* A legenda de idiomas das personas passa a usar a cor de cada idioma, em
       vez de cinco chips brancos iguais. */
    .personas-legend-item {
      background: var(--lang-soft, #fff);
      border-color: var(--lang-line, #ececf0);
      color: var(--lang-accent, #6b7280);
    }

    /* Hero: o mesmo badge da secao "Como funciona", entre o subtitulo e o
       botao — que e onde o olho ja esta antes de decidir clicar. */
    .hero-badge { margin-bottom: 28px; }

    /* No celular o badge fica longo demais com a pilha de bandeiras: em vez de
       estourar a largura, ele quebra em duas linhas. */
    @media (max-width: 639px) {
      .badge {
        flex-wrap: wrap;
        max-width: 100%;
        row-gap: 4px;
        font-size: 0.75rem;
      }
    }

    /* Chips de idioma dentro do CTA escuro: mesma peca, tratamento invertido —
       a cor da bandeira ja da o sinal, o texto fica branco. */

    .cta-langs .lang-chip {
      background: rgba(255, 255, 255, 0.10);
      border-color: rgba(255, 255, 255, 0.20);
      color: #fff;
    }

    /* Chips no fim da resposta do FAQ sobre idiomas: a lista de cinco nomes em
       texto corrido nao registrava; em chip com bandeira, registra. */
    .faq-langs { margin-top: 14px; gap: 6px; }

    .cta-langs { opacity: 1; gap: 8px; }

    /* A pilha dentro da legenda da barra precisa de um respiro do texto. */
    .bar-note .lang-stack { margin-right: 6px; }

    /* ===== ACESSO ANTECIPADO + IDIOMAS EM ABERTO =====
       A pagina vendia "cinco idiomas" como numero fechado e nao dizia em
       lugar nenhum que o produto esta em pre-venda. Estas pecas resolvem as
       duas coisas sem mexer em estrutura: um selo de fase para os eyebrows,
       um chip neutro de "tem mais idiomas" e a linha que diz, aba por aba, o
       que ja roda no Telegram e o que so chega com o aplicativo. */

    /* Selo de fase, numa linha propria acima do eyebrow: dentro do rotulo ele
       disputava largura com o texto em caixa alta e quebrava em duas linhas. */
    .early-line { margin-bottom: 10px; }
    .early-tag {
      display: inline-block;
      white-space: nowrap;
      padding: 4px 11px;
      border-radius: 999px;
      background: rgba(255, 119, 89, 0.12);
      border: 1px solid rgba(255, 119, 89, 0.32);
      color: #ff7759;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      vertical-align: middle;
    }
    /* No CTA escuro o laranja perde contraste: vira branco translucido. */
    .early-tag--dark {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.28);
      color: #fff;
    }

    /* Chip neutro que fecha as fileiras de bandeiras. Borda tracejada porque
       e uma promessa, nao um idioma que ja existe. */
    .lang-chip--more {
      background: transparent;
      border-style: dashed;
      border-color: #d3d3db;
      color: #8b8f9a;
      padding-left: 10px;
      padding-right: 10px;
      font-weight: 600;
    }
    .cta-langs .lang-chip--more {
      background: transparent;
      border-color: rgba(255, 255, 255, 0.30);
      color: rgba(255, 255, 255, 0.78);
    }
    .personas-legend-item--more {
      background: transparent;
      border-style: dashed;
      border-color: #d3d3db;
      color: #8b8f9a;
      font-weight: 600;
    }

    /* Linha de disponibilidade do carrossel de funcionalidades. O ponto
       colorido faz a leitura sem depender de ler a frase inteira. */
    .feature-avail {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: -18px 0 26px;
      font-family: var(--font-display);
      font-size: 0.8125rem;
      font-weight: 500;
      line-height: 1.35;
      text-align: left;
    }
    .feature-avail::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      background: currentColor;
    }
    .feature-avail--live { color: #1a9c5b; }
    .feature-avail--app { color: #b07100; }

    /* Preco: o aviso de que este valor e de lancamento precisa estar colado
       no numero, nao so no topo da secao. */
    .pricing-intro { margin-bottom: 8px; }
    .compare-tag {
      display: inline-block;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.30);
      font-size: 0.625rem;
      letter-spacing: 0.06em;
      vertical-align: middle;
    }
    .compare-lock {
      font-size: 0.8125rem;
      line-height: 1.45;
      margin: 0 0 22px;
      color: rgba(255, 255, 255, 0.72);
    }

    /* ===== RESPONSIVE: HERO ASSIMÉTRICO =====
       Só a partir de 1320px. A conversa animada tem uma barra de digitação
       com white-space: nowrap, então o conteúdo dela não encolhe abaixo de
       ~500px — é isso que define quanto o celular pode avançar sobre o
       cartão. Abaixo de 1320px não sobra largura para os dois, e o hero
       volta ao empilhamento centralizado (onde o celular é o visual). */
    @media (min-width: 1320px) {
      .hero { text-align: left; padding-bottom: 192px; }
      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
        gap: 96px;
        align-items: center;
      }
      .hero .section-title {
        font-size: clamp(2.75rem, 3.4vw, 3.5rem);
        line-height: 1.06;
        letter-spacing: -2px;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 24px;
      }
      .hero .section-subtitle {
        font-size: 1.125rem;
        max-width: 470px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 40px;
      }
      .hero .section-label { font-size: 0.8125rem; letter-spacing: 1.4px; margin-bottom: 22px; }
      .hero .section-label::before { width: 28px; }
      .hero .btn { font-size: 1.0625rem; }
      .hero-cta-note { margin-top: 14px; font-size: 0.875rem; }
      .hero-copy .section-subtitle { margin-bottom: 24px; }
      .hero-badge { margin-bottom: 36px; }
      .hero-proof {
        justify-content: flex-start;
        margin-top: 40px;
        padding-top: 28px;
        border-top: 1px solid #ececf0;
        gap: 14px;
      }
      .hero-proof-faces img { width: 36px; height: 36px; }
      .hero-proof-faces img + img { margin-left: -12px; }
      .hero-proof p { font-size: 0.875rem; }

      /* Palco: o celular sobrepõe o cartão de conversa, em vez de os dois
         ficarem lado a lado disputando o mesmo peso visual. O celular avança
         para a calha do grid e o cartão ganha padding à esquerda, então a
         sobreposição nunca cobre a animação do chat. */
      .hero-stage {
        position: relative;
        margin-top: 0;
      }
      /* Palco: o celular sobrepõe o cartão de conversa. O celular avança para
         a calha do grid e o cartão ganha padding à esquerda, então a
         sobreposição nunca cobre a animação do chat. A altura é o que manda
         aqui — a conversa animada abre até ~540px e corta se faltar espaço. */
      .hero-stage {
        position: relative;
        margin-top: 0;
      }
      .hero-chat {
        display: block;
        position: relative;
        aspect-ratio: auto;
        max-width: none;
        width: 100%;
        height: 676px;
        padding: 20px 20px 20px 228px;
        background: #fff;
        border: 1px solid #ececf0;
        opacity: 0;
        animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards;
      }
      .hero-stage .hero-visual {
        position: absolute;
        left: -28px;
        bottom: -44px;
        z-index: 2;
        width: 240px;
        max-width: none;
        margin: 0;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16);
      }
    }
    /* Telas largas: o hero usa um container maior, então a coluna de texto
       volta a ter largura de leitura confortável sem espremer a conversa. */
    @media (min-width: 1520px) {
      .hero > .container { max-width: 1440px; }
      .hero-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
    }



    /* ===== RESPONSIVE: DA MULTIPLATAFORMA AO FIM, NO CELULAR =====
       Da secao "Sua proxima conversa, onde voce ja esta" para baixo, o unico
       tratamento de celular que existia era o do painel de features e o do
       FAQ/CTA final. O que sobrava quebrado:

       1. Titulo de secao em 2rem (32px) num corpo de 350px — quatro a seis
          linhas em multiplataforma, personas e preco. Hero, FAQ e CTA final
          ja tem tamanho proprio (seletor de dois niveis) e nao entram aqui.
       2. Personas: abaixo de 768px a grade vira fila horizontal com
          align-items: stretch, entao os onze cartoes herdavam a altura do
          mais alto (o do Felix, com citacao + bio) — as fichas compactas
          ficavam com ~250px de vazio entre o nome e o rodape.
       3. Preco: 36px/32px de respiro interno dentro de um cartao que no
          celular tem 350px, sobrando 286px de conteudo para o preco, o
          checklist e o botao.
       4. FAQ: a resposta anima via max-height, e o teto de 420px fica a uma
          linha de cortar texto nas respostas 03 e 04 em telas de 360px.

       Bloco no fim da folha de proposito: e a ultima palavra sobre estas
       secoes, sem precisar de !important em lugar nenhum. */
    @media (max-width: 767px) {
      /* Cada cartao com a sua altura natural. A secao ja escolheu largura,
         nao altura, como sinal de hierarquia no celular ("a heterogeneidade
         vira largura de cartao"), e o stretch nivelava tudo por cima. */
      .personas-grid { align-items: flex-start; }
      /* Rodape colado embaixo: nos cartoes com bio o flex:1 da bio ja ocupa a
         sobra e este auto vira zero; nas fichas compactas, que nao tem bio, e
         o que impede o rodape de subir e flutuar no meio do cartao. */
      .persona-foot { margin-top: auto; }
      /* A citacao em 24px ocupava cinco linhas num cartao de 260px de
         conteudo, e era ela que ditava a altura da fila inteira. */
      .persona-say-line { font-size: 1.3125rem; letter-spacing: -0.3px; }

      /* Teto folgado: a 360px a resposta 03 chega a ~336px e a 04 a ~300px,
         entao 420 cortava com uma linha a mais de texto. */
      .faq-item.open .faq-answer { max-height: 640px; }
    }

    @media (max-width: 639px) {
      #multiplatform .section-title,
      #personas .section-title,
      .pricing .section-title {
        font-size: 1.625rem;
        letter-spacing: -0.7px;
        text-wrap: balance;
      }
      #personas .section-subtitle,
      .pricing .section-subtitle {
        font-size: 0.9375rem;
        text-wrap: pretty;
      }
      #personas .section-label,
      .pricing .section-label { font-size: 0.75rem; }

      /* PERSONAS: com a calha em 20px sobram 370px de pista. Larguras um
         degrau menores deixam a borda do cartao seguinte aparecer, que e o
         que avisa que a fila arrasta. */
      .persona-card { flex-basis: 252px; }
      .persona-card--wide { flex-basis: 286px; }
      .persona-card--slim { flex-basis: 196px; }
      .personas-head { margin-bottom: 22px; }

      /* PRECO */
      .pricing-compare { gap: 28px; margin-top: 32px; }
      .compare-banner { padding: 28px 22px; border-radius: 18px; }
      .compare-name { font-size: 0.9375rem; }
      .price-split .compare-price { font-size: 2.5rem; }
      .compare-hero .compare-list { padding: 2px 14px; }
      .compare-list li { font-size: 0.9375rem; padding: 10px 0; }
      .compare-lock { margin-bottom: 18px; }
      .price-scale-intro { font-size: 0.875rem; margin-bottom: 24px; }
      .bar-rows { gap: 22px; }
      .bar-track { height: 32px; }
      .bar-name,
      .bar-value { font-size: 0.9375rem; }
      .price-scale-foot { margin-top: 28px; padding-top: 18px; font-size: 0.875rem; }
    }


    /* ===== ANEIS DO FECHO NO CELULAR =====
       Os aneis brancos sao o unico ornamento do painel de fecho, e no celular
       eles nao apareciam: o SVG tem viewBox de 1120x540 (proporcao 2.07) com o
       centro em cx=900, e num painel de 350x~700 o `background-size: cover`
       amplia tanto que sobra, no maximo, um arco quase reto na base. Sem eles o
       fecho virava um retangulo coral chapado — igual ao cartao do plano anual,
       que e exatamente o bloco de que ele precisa se diferenciar.

       Mesmo desenho, reancorado para retrato: viewBox de 390x700, centro em
       (330, 760) — logo abaixo do canto inferior direito — e raios de
       150/230/320/420 para quatro arcos concentricos varrendo de baixo a
       direita. A opacidade sobe de 0.28 para 0.30 porque em area menor o traco
       de 1.5px tem menos superficie para registrar.

       So abaixo de 640px. Entre 640 e 767 o painel ainda e largo (620px com a
       calha de 40px) e o SVG original mostra um arco de verdade ali — trocar
       naquela faixa e que estragaria. */
    @media (max-width: 639px) {
      .cta-panel::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='390'%20height='700'%20viewBox='0%200%20390%20700'%20preserveAspectRatio='xMidYMax%20slice'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.5'%20stroke-opacity='0.30'%3E%3Ccircle%20cx='330'%20cy='760'%20r='150'/%3E%3Ccircle%20cx='330'%20cy='760'%20r='230'/%3E%3Ccircle%20cx='330'%20cy='760'%20r='320'/%3E%3Ccircle%20cx='330'%20cy='760'%20r='420'/%3E%3C/g%3E%3C/svg%3E");
      }
    }

    /* Faixa do meio: 640 a 767px. Aqui a calha volta para 40px, entao o painel
       tem entre 560px (a 640 de tela) e 687px (a 767) de largura, e a headline
       cabe em duas ou tres linhas em vez de cinco — a caixa fica quase
       quadrada, entre 0.87 e 1.28 de proporcao. Nenhum dos outros dois
       desenhos serve: o de 1120x540 e largo demais e o de 390x700 e alto
       demais, e o `cover` corta o que sobra em cada caso.

       Terceiro ancoramento, para caixa quadrada: viewBox de 640x600, centro em
       (560, 680) e raios de 170/260/360/470. Com o centro colado na borda
       direita do recorte, os arcos entram pelo canto inferior direito nas duas
       pontas da faixa. */
    @media (min-width: 640px) and (max-width: 767px) {
      .cta-panel::before {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='600'%20viewBox='0%200%20640%20600'%20preserveAspectRatio='xMidYMax%20slice'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.5'%20stroke-opacity='0.29'%3E%3Ccircle%20cx='560'%20cy='680'%20r='170'/%3E%3Ccircle%20cx='560'%20cy='680'%20r='260'/%3E%3Ccircle%20cx='560'%20cy='680'%20r='360'/%3E%3Ccircle%20cx='560'%20cy='680'%20r='470'/%3E%3C/g%3E%3C/svg%3E");
      }
    }

    /* ===== ANIMATIONS ===== */

    /* Scroll reveal: elements start hidden, slide up + fade in when visible */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--reveal-delay, 0s);
      will-change: opacity, transform;
    }
    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    /* Hero entrance animation (plays on load) */
    @keyframes heroFadeUp {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero .section-label,
    .hero .section-title,
    .hero .section-subtitle,
    .hero-badge,
    .hero-copy > .btn,
    .hero-cta-note,
    .hero-proof,
    .hero-visual {
      opacity: 0;
      animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .hero .section-label    { animation-delay: 0.05s; }
    .hero .section-title    { animation-delay: 0.18s; }
    .hero .section-subtitle { animation-delay: 0.32s; }
    .hero-badge             { animation-delay: 0.42s; }
    .hero-copy > .btn       { animation-delay: 0.54s; }
    .hero-cta-note          { animation-delay: 0.64s; }
    .hero-proof             { animation-delay: 0.72s; }
    .hero-visual            { animation-delay: 0.78s; }

    .hero-visual {
      animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards;
    }

    /* O shimmer animado da marca saiu: ele disputava atencao com a headline. */

    /* Card hover lift */
    .contact-card {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .contact-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 32px rgba(0,0,0,0.10);
    }

    /* Pillar icon pop on card hover */

    /* Pricing card subtle pulse to draw attention */
    @keyframes pricingGlow {
      0%, 100% { box-shadow: 0 0 0 rgba(17,17,17,0); }
      50%      { box-shadow: 0 12px 40px rgba(17,17,17,0.16); }
    }
    .pricing-card { animation: pricingGlow 4s ease-in-out infinite; }

    /* Animated underline for store buttons / CTAs */
    .btn-app-store { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .btn-app-store:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.25); }

    /* FAQ accordion */
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
      font-size: 1rem;
      color: #6b7280;
      text-align: left;
      line-height: 1.7;
      margin: 0 32px 0 56px;
      text-wrap: pretty;
    }
    .faq-item.open .faq-answer {
      max-height: 360px;
      opacity: 1;
      padding-top: 16px;
    }
    @media (max-width: 767px) {
      .faq-answer {
        font-size: 0.9375rem;
        line-height: 1.65;
        margin: 0 0 0 40px;
      }
      .faq-item.open .faq-answer { max-height: 420px; padding-top: 14px; }
    }
    .faq-question::after {
      transition: transform 0.3s ease;
    }
    .faq-item.open .faq-question::after {
      transform: rotate(45deg);
    }

    /* Respect users who prefer reduced motion */
    @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; }
      .hero .section-label,
      .hero .section-title,
      .hero .section-subtitle,
      .hero-badge,
      .hero-copy > .btn,
      .hero-cta-note,
      .hero-proof,
      .hero-visual { opacity: 1; }
      .persona-card { transition: none; }
    }