/* ===================== TOKENS / RESET ===================== */
    :root{
      --bg: #0f131e;
      --text: #f6f7f8;
      --muted: #c9d1d9;
      --blue: #00a2ff;
      --blue-hover: #00c2ff;
      --card: rgba(15,19,30,0.92);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 16px;
      --space-1: 8px;
      --space-2: 12px;
      --space-3: 16px;
      --space-4: 24px;
      --space-5: 32px;
      --space-6: 40px;
      --maxw: 1240px;
    }

    *{ box-sizing: border-box; }
    html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
    img{ max-width:100%; height:auto; display:block; }
    a{ color:inherit; text-decoration:none; }
    button{ font:inherit; }
    .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding: 0 var(--space-3); }

    /* Acessibilidade e motion */
    :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
    @media (prefers-reduced-motion: reduce){
      *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }

    /* ===================== COMPONENTES BASE ===================== */
    .btn {
      display:inline-flex; align-items:center; justify-content:center;
      background:var(--blue); color:#0f131e;
      padding:14px 24px; /* levemente maior */
      border-radius:10px; border:none; cursor:pointer;
      transition: background .25s ease, transform .15s ease, box-shadow .25s ease;
      font-weight:700;
      font-size: 16px; /* aumenta leitura */
      box-shadow: 0 4px 14px rgba(0,162,255,.4); /* destaque */
    }
    .btn:hover {
      background:var(--blue-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,162,255,.5);
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--blue);
      background: rgba(0,162,255,.08); border: 1px solid rgba(0,162,255,.35);
      padding:6px 10px; border-radius: 999px;
    }
    .card{
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: var(--space-5);
    }

    /* ===== O QUE VOCÊ RECEBE — Visual refinado ===== */

    /* espaçamento do bloco + transição suave com a seção anterior */
    #o-que-recebe{
      position: relative;
      padding: clamp(36px, 7vw, 64px) 0;
    }
    #o-que-recebe::before{
      content:"";
      position:absolute; inset: -40px 0 auto 0; height: 40px;
      background: radial-gradient(400px 60px at 50% 100%, rgba(0,162,255,.18), transparent 70%);
      pointer-events: none;
    }

    /* título + subtítulo curto (se usar) */
    #o-que-recebe .section__title{ text-align: center; font-size: 30px; padding: 10px 0 50px 0;}
    #o-que-recebe .section__lead{
      color: var(--muted);
      max-width: 720px;
      margin: 6px 0 18px;
      font-size: 15px;
    }

    /* grid com ritmo: quebra ótimo no mobile, 3 col no desktop */
    #o-que-recebe .grid--3{
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    @media (min-width: 760px){
      #o-que-recebe .grid--3{
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 18px;
      }
    }

    /* card base: respiro e leitura ótima */
    .feature{
      position: relative;
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 14px;
      padding: 18px 16px 16px 16px;
      transition: border-color .25s ease, transform .2s ease, box-shadow .25s ease, background .25s ease;
      overflow: hidden;
      box-shadow: 0 16px 34px rgba(0,0,0,.36);
      border-color: rgba(0,162,255,.36);
      background: rgba(15,19,30,.78);
      display: flex;
      flex-direction: column;
      justify-content: center; /* centraliza verticalmente */
      flex: 1; /* todos com a mesma largura */
    }
    .feature h3{
      margin: 4px 0 6px;
      font-size: 18px;
    }
    .feature p{
      margin: 0;
      color: var(--muted);
      font-size: 20px;
      line-height: 1.55;
      text-align: center;
    }

    /* ícone consistente via pseudo + mask (use data-icon no HTML) */
    .feature::before{
      content:"";
      position: absolute;
      top: 14px; left: 14px;
      width: 28px; height: 28px;
      background: var(--blue);
      border-radius: 50%;
      opacity: .95;
      mask: var(--feature-icon) no-repeat center / 60%;
      -webkit-mask: var(--feature-icon) no-repeat center / 60%;
    }

    /* desloca o título pra não colidir com o ícone */
   .feature h3{
     margin: 4px 0 6px;
     font-size: 18px;
     padding-left: 36px; /* alinha com ícone maior */
   }
   .feature p{
     margin: 0;
     color: var(--muted);
     font-size: 20px;
     line-height: 1.6;
     padding-left: 36px; /* alinha com ícone maior */
   }
   @media (min-width: 760px){
     .feature p{ font-size: 16px; }
   }

    /* hover/tap elegante */
    /*.feature:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(0,0,0,.36);
      border-color: rgba(0,162,255,.36);
      background: rgba(15,19,30,.78);
    }*/

    /* card de destaque (o 1º) para guiar a leitura */
    /*.feature--prime{
      background: linear-gradient(180deg, rgba(0,162,255,.12), rgba(15,19,30,.72));
      border-color: rgba(0,162,255,.45);
      transform: scale(1.02);
    }*/
    /*.feature--prime:hover{
      transform: scale(1.03) translateY(-2px);
    }*/
    /*.feature--prime::after{
      content:"Recomendado";
      position:absolute; top: 12px; right: 12px;
      font-size: 11px; letter-spacing:.2px;
      color: #0f131e; background: var(--blue);
      padding: 4px 8px; border-radius: 999px;
    }*/

    /* ritmo “staggered” sutil no desktop */

    /* CTA contextual ao fim do bloco */
    .oque-cta{
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
      margin-top: 18px;
    }
    .oque-cta .badge{ background: rgba(0,162,255,.10); border-color: rgba(0,162,255,.35); }
    .oque-cta .btn{ padding-inline: 18px; margin:0 auto; }

    /* ===== Como agendar — Fundo elegante + passos visuais ===== */
    .how--schedule{
      position: relative;
      padding: clamp(36px, 7vw, 64px) 0;
      background:
        radial-gradient(900px 420px at 75% 0%, rgba(0,162,255,.10), transparent 65%),
        linear-gradient(180deg, rgba(0,162,255,.06) 0%, transparent 55%);
      overflow: clip;
    }

    /* blobs/shape sutis para dar fluidez entre seções */
    .how--schedule::before,
    .how--schedule::after{
      content:"";
      position:absolute; inset:auto -10% -12% -10%;
      background:
        radial-gradient(540px 220px at 20% 80%, rgba(0,162,255,.14), transparent 70%),
        radial-gradient(380px 180px at 80% 40%, rgba(0,162,255,.10), transparent 75%);
      filter: blur(18px);
      pointer-events: none;
      z-index: 0;
    }
    .how--schedule::before{ inset: -8% -10% auto -10%; }

    .how__lead{
      color: var(--muted);
      margin: 6px 0 30px;
      max-width: 720px;
      font-size: 15px;
    }

    #como-funciona .section__title {
      text-align: center;
      font-size: clamp(24px, 4.6vw, 32px);
      margin-bottom: 8px;
    }
    #como-funciona .how__lead {
      text-align: left;
    }

    /* rail mantém snap no mobile, mas os cards agora têm numeração e ícone */
    .steps{ position: relative; z-index: 1; display: grid; gap: var(--space-3); }
    .steps__rail{
      display:grid; grid-auto-flow: column; grid-auto-columns: 88%;
      gap: var(--space-3);
      overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      padding-bottom: 6px;
    }
    @media (min-width: 860px){
      .steps__rail{ grid-auto-columns: 1fr; grid-template-columns: repeat(3, 1fr); overflow: visible; }
    }

    /* card do passo (herda seu estilo base e adiciona identidade) */
    .step {
      position: relative;
      overflow: visible;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 120px;
      padding: 28px 20px 20px;
      background: rgba(15,19,30,.68);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
      scroll-snap-align: start;
      transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
      text-align: center;
    }

    .step h3{ margin:0; }
    .step p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
    }

    @media (min-width: 760px){
      .step p {
        font-size: 16px;
      }
    }

    /* ícone via mask na borda superior, consistente e leve 
    .step::before{
      content:"";
      position:absolute; 
      right: 16px;
      width: 26px; height: 26px;
      background: var(--blue);
      opacity: .95;
      mask: var(--step-icon) no-repeat center / contain;
      -webkit-mask: var(--step-icon) no-repeat center / contain;
      top: 18px;
    }*/

    /* bolacha numerada para ritmo visual e sequência */
    .step__badge {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(180deg, var(--blue), #00b3ff);
      color: #0f131e;
      font-weight: 800;
      font-size: 14px;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0,162,255,.28);
      border: 1px solid rgba(255,255,255,.12);
    }

    /* micro-interações 
    .step:hover{
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(0,0,0,.36);
      border-color: rgba(0,162,255,.36);
      background: rgba(15,19,30,.78);
    }*/

    /* CTA contextual alinhado ao bloco */
    .how__cta{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
      margin-top: 10px;
    }
    .how__cta .btn{ padding-inline: 18px; }

    .how__cta {
      display: flex;
      justify-content: center; /* Centraliza tudo no centro da linha */
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    /* acessibilidade de movimento */
    @media (prefers-reduced-motion: reduce){
      .step{ transition: none !important; }
    }


    /* ===================== HEADER ===================== */
    .header{ position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(140%) blur(6px); background: rgba(15,19,30,.78); border-bottom: 1px solid rgba(255,255,255,.06); }
    .header__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block: 10px; }
    .logo{ display:flex; align-items:center; gap:10px; }
    .logo__dot{ width:10px; height:10px; background:var(--blue); border-radius:50%; }
    .nav{ display:flex; gap:10px; }
    .nav a{ padding:8px 10px; border-radius:8px; color:#d7dee5; }
    .nav a:hover{ background: rgba(255,255,255,.06); }

 /* ===================== HERO (inspirado, não clone) ===================== */

 .hero__title .hl { color: var(--blue); } /* destaque direto no benefício */

 .btn--xl { 
   font-size: 18px; 
   padding: 16px 28px; 
   min-height: 48px;
 }

 .hero__cta .btn { min-height: 48px; }

 .hero__meta{
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   align-items: center;
   font-size: 13px;
   color: var(--muted);
   margin-top: 6px;
   margin-bottom: 15px;
 }

 .hero.hero--gather{
   position: relative;
   background:
     radial-gradient(1240px 600px at 60% -10%, rgba(0,162,255,.10), transparent 60%),
     linear-gradient(to bottom, #0f131e, #131a28);
   padding: clamp(16px, 3.5vw, 32px) 0 0; /* top/bottom menores */
   padding-top: clamp(10px, 2.5vw, 5px); /* só o topo */
   overflow: hidden;
 }

 .hero.hero--gather::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
     radial-gradient(800px 400px at 85% 60%, rgba(0,162,255,.25), transparent 70%),
     radial-gradient(600px 300px at 15% 80%, rgba(0,162,255,.12), transparent 75%);
   filter: blur(22px);
   z-index: 0;
   pointer-events: none;
 }
 .hero__wrap{
   position: relative;
   display: grid;
   gap: 24px;
   grid-template-columns: 1fr;  /* mobile-first empilhado */
   min-height: auto;
 }

 @media (max-width: 959.98px) {
   .hero__wrap {
     grid-template-columns: 1fr; /* empilha no mobile */
     min-height: auto;
   }
 }

 /* ——— Texto */
 .hero__copy{
   position: relative;
   z-index: 2;
   display: grid;
   gap: 14px;
   /*backdrop-filter: blur(4px) saturate(115%);
   background: rgba(15,19,30,.78);
   border: 1px solid rgba(255,255,255,.06);
   border-radius: 16px;*/
   padding: 24px 20px;
   max-width: 720px;
 }
 .hero__copy::before{
   content:"";
   position:absolute; inset:-2px; border-radius:inherit;
   /*background: radial-gradient(240px 160px at 14% 0%, rgba(0,162,255,.12), transparent 60%);*/
   z-index:-1;
 }

 .hero__title{
   margin: 4px 0 4px;
   font-size: clamp(26px, 5.4vw, 42px);
   line-height: 1.1;
 }
 .hero__sub{
   margin: 0 0 6px;
   color: var(--muted);
   font-size: clamp(14px, 3.6vw, 18px);
 }
 .hero__cta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

 /* trust strip em linha, sutil */
 .hero__trust{
   display:flex; flex-wrap:wrap; gap:10px 16px;
   padding:0; margin: 6px 0 0; list-style:none;
   color:#cfd6dd; font-size: 13px;
 }
 .hero__trust li{
   position: relative; padding-left: 12px; opacity: .9;
 }
 .hero__trust li::before{
   content:""; position:absolute; left:0; top:8px;
   width:6px; height:6px; border-radius:50%; background: var(--blue);
 }

 /* ——— Visual integrado */
 .hero__visual{
   position: relative;
   z-index: 1;
   min-height: 320px;
   overflow: visible;
   border: none;
 }

 /* Foto ocupa a direita e dissolve para o centro; borda suave azul */
 .hero__photo{
   position: relative;
   display:block;
   margin-left: auto; /* encosta na direita */
   width: min(560px, 58vw);
   max-height: 78vh;
   object-fit: cover;
   object-position: center;
   border: none;
   box-shadow: none;
   filter: saturate(1.03) contrast(1.02);
   -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 78%, rgba(0,0,0,0));
           mask-image: linear-gradient(to left, rgba(0,0,0,1) 78%, rgba(0,0,0,0));
 }

 .hero__wrap,
 .hero__copy,
 .hero__visual {
   position: relative;
   z-index: 1;
 }

 /* “faixa” azulada por trás para dar presença sem peso visual */
 .hero__glow{
   position: absolute; inset: -8% -10% -10% 10%;
   /*background:
     radial-gradient(600px 320px at 85% 40%, rgba(0,162,255,.22), transparent 65%),
     radial-gradient(500px 280px at 60% 85%, rgba(0,162,255,.10), transparent 70%);*/
   filter: blur(18px);
   z-index: -1;
   pointer-events: none;
 }

 /*.hero__photo {
   width: min(600px, 60vw); /* imagem um pouco maior
 }*/

 @media (min-width: 960px){
   .hero__wrap{
     grid-template-columns: 1.15fr 1.15fr;
     column-gap: 120px;
     align-items: stretch;
     align-content: start;

     /* altura fluida do hero (sem “buracos” em telas grandes) */
     min-height: clamp(540px, 72vh, 720px);
     height: auto;
   }

   .hero__copy{
     align-self: start;
     padding: 12px 0 0 0;
     margin-top: 0;
     max-width: 720px;
   }

   .hero__visual{
     align-self: stretch;
     display: flex;
     align-items: flex-end;   /* ancora embaixo */
     justify-content: flex-end;
     min-height: 0;           /* previne overflow fantasma do grid */
     overflow: hidden;        /* corta o topo quando “crescermos” a foto */
   }

   .hero__photo{
     /* ⚠️ remover qualquer translate/scale anterior */
     transform: none;

     /* ancora a imagem no canto inferior direito */
     object-fit: cover;                /* preenche sem barras */
     object-position: 100% 100%;       /* bottom right */

     /* faz a cabeça subir sem descolar do fundo */
     height: 118%;                     /* cresce um pouco acima da célula */
     max-height: none;                 /* libera o crescimento */
     width: auto;                      /* mantém proporção */
     /* se preferir controlar por largura, você pode manter width: clamp(480px,46vw,620px); 
        e trocar 'height: 110%' por 'max-height: 100%' */
   }
 }


 @media (max-width: 959.98px){
  .hero__visual{ position: relative; overflow: visible; }
   .hero__photo{
     width: 88vw;
     margin-right: -12px; /* faz a imagem “sair” um pouco da borda, como nas referências */
     -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 96%);
             mask-image: linear-gradient(to left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 96%);
     opacity: .95;

   }

   .hero__visual{ position: relative; overflow: visible; }
   .hero__visual::after{
     content:"";
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 0;
     width: 100vw;
     height: 2px; /* um pouco mais alta para perceber o degradê */
     background-image: linear-gradient(
       90deg,
       #00a2ff 0%,
       #00b3ff 50%,
       #00c2ff 100%
     );
     box-shadow: 0 6px 16px rgba(0,162,255,.28);
     pointer-events: none;
     z-index: 2;
   }
   .hero__title, .hero__sub {text-align: center !important;}
   .hero__visual::after{
     content:"";
     position:absolute;
     left:50%;
     transform: translateX(-50%);
     bottom:0;
     width:100vw;                /* ocupa toda a largura da tela */
     height:6px;
     background: linear-gradient(90deg, var(--blue), var(--blue-hover));
     box-shadow: 0 6px 16px rgba(0,162,255,.28);
     pointer-events:none;
     z-index:2;
   }
   .hero__wrap{
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "visual"  /* foto em cima */
        "copy";   /* texto embaixo */
    }
    .hero__visual{ grid-area: visual; }
    .hero__copy{ grid-area: copy; }

    /* (opcional) remova qualquer order anterior */
    .hero__visual, .hero__copy{ order: initial; }

   .who{ --who-x: 40%; }     /* desloca levemente para preservar o rosto */
   .who__content{ margin-left: 0; }  /* texto volta a ficar centralizado no container */
   .who .section__title{  font-size: 30px !important; }
   .who__trust li{text-align: center;}
   .who::before{
     background:
       linear-gradient(180deg,
         rgba(15,19,30,.70) 0%,
         rgba(15,19,30,.35) 45%,
         rgba(15,19,30,.70) 100%);
   }
 }

 @media (max-width: 599px) {
   .hero__photo {
     -webkit-mask-image: none;
     mask-image: none;
     border-radius: 12px;
   }

   .hero__cta {
     flex-direction: column;
     align-items: stretch;
   }
   .hero__cta .btn {
     width: 100%;
   }
 }

 /* acessibilidade de movimento */
 @media (prefers-reduced-motion: reduce){
   .hero__photo, .hero__glow{ transition: none !important; }
 }

    /* ===================== COMO FUNCIONA (carrossel snap) ===================== */
    #como-funciona .section__title {
      font-size: 30px;
      text-align: center;
      padding: 10px 0 50px 0; 
    }

    .steps{
      display:grid; gap: var(--space-3);
    }
    .steps__rail{
      display:grid; grid-auto-flow: column; grid-auto-columns: 85%;
      gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px;
      overflow: visible;
    }
    .steps__item{
      scroll-snap-align: start; border:1px solid rgba(255,255,255,.06);
      border-radius:999px; 
      background: rgba(15,19,30,.6);
      border-color: rgba(0,162,255,.36);
    }
    .steps__item h4{ margin: 0 0 6px; font-size:18px; }
    .steps__item p{ margin:0; color: var(--muted); }

  /* ===== Refinos UX "Para quem é" ===== */
  #para-quem-e { padding: clamp(36px, 6vw, 64px) 0; }

  #para-quem-e .grid--2 > .section__title{
    grid-column: 1 / -1;
    text-align: center;
    margin: 0 0 32px;
    font-size: clamp(22px, 4.2vw, 28px);
  }

  .audience__title{
    margin: 8px 0 6px;
    font-size: clamp(18px, 3.8vw, 20px);
    color: var(--text);
  }

  /* Diferenciação de bullets por bloco (psicológico/rapidez de leitura) */
  .audience--yes .list li::before{
    background: linear-gradient(180deg, var(--success-from), var(--success-to));
  }
  .audience--no .list li::before{
    background: linear-gradient(180deg, var(--danger-from), var(--danger-to));
  }

  /* Ajustes de leitura */
  #para-quem-e .list li{
    color: var(--muted);
    line-height: 1.6;
  }

  /* Respiro no mobile */
  @media (max-width: 699px){
    #para-quem-e { padding: clamp(28px, 7vw, 40px) 0; }
  }


   /* ===================== SOBRE ===================== */
   #sobre {
     padding: clamp(40px, 6vw, 80px) 0;
     background: rgba(15,19,30,0.6); /* mantém coesão visual */
     border-top: 1px solid rgba(255,255,255,.06);
     border-bottom: 1px solid rgba(255,255,255,.06);
   }

   #sobre .container {
     display: grid;
     gap: 24px;
     align-items: center;
   }

   @media (min-width: 860px) {
     #sobre .container {
       grid-template-columns: 1fr 1fr;
     }
   }

   #sobre .section__title {
     font-size: clamp(24px, 4vw, 32px);
     margin-bottom: 12px;
     color: var(--text);
   }

   #sobre .section__lead {
     font-size: 16px;
     line-height: 1.6;
     color: var(--muted);
     margin-bottom: 18px;
   }

   #sobre p {
     font-size: 15px;
     line-height: 1.65;
     color: var(--muted);
     margin-bottom: 16px;
   }

   #sobre img {
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     max-width: 100%;
     height: auto;
     border: 1px solid rgba(255,255,255,.06);
   }

   /* CTA dentro do sobre */
   #sobre .btn {
     margin-top: 10px;
     padding: 14px 24px;
   }

   /* Destaque estratégico no título */
   #sobre .section__title span {
     color: var(--blue);
   }

    /* acessibilidade de movimento */
    @media (prefers-reduced-motion: reduce){
      .hero__photo{ transition: none !important; }
    }

    /* ===================== AJUSTES DE ESPAÇAMENTO GLOBAL ===================== */
    .mt-1{ margin-top: var(--space-1); } .mt-2{ margin-top: var(--space-2); } .mt-3{ margin-top: var(--space-3); }
    .mt-4{ margin-top: var(--space-4); } .mt-5{ margin-top: var(--space-5); } .mt-6{ margin-top: var(--space-6); }

    /* ===================== CTA FINAL ===================== */
    .cta-final {
      text-align: center;
      padding: clamp(40px, 6vw, 80px) 0;
      background: rgba(15,19,30,0.85);
      border-top: 1px solid rgba(255,255,255,.06);
    }

    .cta-final h2 {
      font-size: clamp(22px, 4.5vw, 32px);
      color: var(--text);
      margin-bottom: 12px;
    }

    .cta-final p {
      font-size: 16px;
      color: var(--muted);
      max-width: 720px;
      margin: 0 auto 20px;
      line-height: 1.6;
    }

    .cta-final__bonus {
      margin-bottom: 20px;
    }

    .cta-final__btns {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }

    .cta-final .btn--xl {
      font-size: 18px;
      padding: 16px 28px;
      min-height: 48px;
    }

    /* ===================== FAQ ===================== */
    #faq {
      padding: clamp(40px, 6vw, 80px) 0;
      background: rgba(15,19,30,0.7);
      border-top: 1px solid rgba(255,255,255,.06);
    }

    #faq .section__title {
      text-align: center;
      margin-bottom: 28px;
      font-size: clamp(22px, 4.5vw, 32px);
    }

    .faq-list {
      display: grid;
      gap: 20px;
      max-width: 820px;
      margin: 0 auto;
    }

    .faq-item {
      background: rgba(15,19,30,0.8);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow);
      transition: transform .2s ease, box-shadow .25s ease;
    }

    .faq-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(0,0,0,.36);
      border-color: rgba(0,162,255,.36);
    }

    .faq-question {
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--blue);
    }

    .faq-answer {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.6;
    }
    @media (min-width: 760px){
      .faq-answer {
        font-size: 16px;
      }
    }


    /* ===================== PAIN SECTION ===================== */
    .pain-section{
      position: relative;
      padding: clamp(40px, 6vw, 80px) 0;
      background:
        radial-gradient(900px 420px at 75% 0%, rgba(0,162,255,.10), transparent 65%),
        linear-gradient(to bottom, var(--bg), #131a28);
      overflow: clip;
    }

    .pain-bg-line{
      position:absolute; inset:0 auto 0 50%;
      width:2px; height:100%;
      background: linear-gradient(var(--blue), transparent);
      transform: translateX(-50%);
      opacity:.08;
      pointer-events:none;
    }

    .pain-glow{
      position:absolute; inset:-10% -10% auto -10%;
      height: 60%;
      background:
        radial-gradient(520px 240px at 20% 40%, rgba(0,162,255,.16), transparent 70%),
        radial-gradient(380px 180px at 90% 70%, rgba(0,162,255,.10), transparent 75%);
      filter: blur(18px);
      pointer-events:none;
    }

    .pain-intro{
      text-align:center;
      margin-bottom: var(--space-4);
    }
    .pain-intro .section__title{
      font-size: clamp(24px, 4.8vw, 34px);
      margin: 6px 0 8px;
    }
    .pain-intro .section__lead{
      color: var(--muted);
      font-size: clamp(14px, 3.2vw, 18px);
      max-width: 720px; margin: 0 auto;
    }

    /* GRID VISUAL */
    .pain-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 18px;
    }
    @media (min-width: 820px){
      .pain-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 18px;
      }
    }

    .pain-card{
      position: relative;
      background: rgba(15,19,30,.78);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 18px 16px 16px 16px;
      box-shadow: 0 16px 34px rgba(0,0,0,.36);
      overflow:hidden;
      transition: border-color .25s ease, transform .2s ease, background .25s ease, box-shadow .25s ease;
    }
    .pain-card:hover{
      transform: translateY(-2px);
      border-color: rgba(0,162,255,.36);
      background: rgba(15,19,30,.82);
      box-shadow: 0 20px 40px rgba(0,0,0,.42);
    }

    .pain-icon{
      --size: 40px;
      width: var(--size); height: var(--size);
      border-radius: 12px;
      background: linear-gradient(180deg, var(--blue), #00b3ff);
      color: #0f131e;
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 10px 24px rgba(0,162,255,.35);
      border: 1px solid rgba(255,255,255,.12);
      margin-bottom: 10px;
    }

    .pain-card h3{
      margin: 0 0 6px;
      font-size: clamp(16px, 3.8vw, 20px);
    }
    .pain-card p{
      margin: 0;
      color: var(--muted);
      font-size: clamp(14px, 3.4vw, 16px);
      line-height: 1.6;
    }
    .pain-note{
      display:block;
      margin-top: 8px;
      font-size: 12px;
      letter-spacing:.2px;
      color: #cfd6dd;
      opacity:.9;
    }

    .pain-bottom{
      text-align:center;
      max-width: 900px;
      margin: clamp(18px,4vw,32px) auto 0;
    }
    .pain-impact{
      color: var(--muted);
      font-size: clamp(14px, 3.2vw, 18px);
      line-height: 1.6;
      margin: 0 0 14px;
    }
    .pain-impact strong{ color: var(--text); }

    .pain-cta{
      display:grid; gap: 12px; justify-items:center;
    }
    .pain-cta .btn{ padding: 14px 22px; }
    .pain-cta .btn--ghost{
      border:1px solid var(--blue); border-radius:10px; padding:12px 18px;
    }

    /* microprovas em linha (usa seu padrão existente) */
    .trust--inline{
      display:flex; flex-wrap:wrap; gap:10px 16px; margin: 8px 0 0;
      list-style:none; color:#cfd6dd; font-size: 13px; padding:0;
    }
    .trust--inline li{ position: relative; padding-left: 12px; opacity: .9; }
    .trust--inline li::before{
      content:""; position:absolute; left:0; top:8px;
      width:6px; height:6px; border-radius:50%; background: var(--blue);
    }

    /* Acessibilidade */
    .pain-card:focus-within{ outline: 2px solid var(--blue); outline-offset: 2px; }

    /* ===== Reading progress (top) ===== */
    .reading-progress{
      position: sticky; top: 0; z-index: 60;
      height: 3px; width: 0%;
      background: linear-gradient(90deg, var(--blue), var(--blue-hover));
      box-shadow: 0 1px 0 rgba(0,0,0,.25);
    }

    /* ===== Stage Nav (índice de seções) ===== */
    .stage-nav{
      position: sticky; top: 3px; z-index: 50;
      backdrop-filter: saturate(140%) blur(6px);
      background: rgba(15,19,30,.72);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .stage-nav__list{
      list-style: none; margin: 0; padding: 8px 0;
      display: flex; gap: 10px; overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .stage-nav a{
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 999px;
      color: #d7dee5; font-size: 14px; white-space: nowrap;
      border: 1px solid transparent; transition: .2s ease;
    }
    .stage-nav a:hover{ background: rgba(255,255,255,.06); }
    .stage-nav a.is-active{
      color: #0f131e;
      background: linear-gradient(180deg, var(--blue), #00b3ff);
      border-color: rgba(255,255,255,.12);
      box-shadow: 0 8px 20px rgba(0,162,255,.28);
      font-weight: 700;
    }

    /* anchors com offset (para sticky header) */
    section[id]{ scroll-margin-top: 96px; }

    /* ===== Sticky CTA (mobile) ===== */
    .sticky-cta{
      position: fixed; inset: auto 0 0 0; z-index: 55;
      display: none; /* desktop some */
      gap: 8px; padding: 10px;
      background: rgba(15,19,30,.92);
      border-top: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 -10px 30px rgba(0,0,0,.35);
    }
    .sticky-cta .btn{ width: 100%; min-height: 44px; }
    .sticky-cta__primary{ font-weight: 800; }
    .sticky-cta__sec{
      border:1px solid var(--blue); border-radius:10px;
      background: transparent;
    }

    /* mostra apenas em telas menores */
    @media (max-width: 860px){
      .sticky-cta{ display: grid; grid-template-columns: 1fr 1fr; }
    }



    /* ===== CONTE COM A GENTE / O QUE ESPERAR ===== */
    .conte-conosco{
      position: relative;
      padding: clamp(36px, 6vw, 64px) 0;
      background:
        radial-gradient(900px 420px at 75% 0%, rgba(0,162,255,.08), transparent 65%),
        linear-gradient(to bottom, var(--bg), #131a28);
      overflow: clip;
    }
    .conte-conosco .section__title{
      text-align:center;
      font-size: clamp(22px, 4.6vw, 30px);
      margin: 0 0 8px;
    }
    .conte-conosco .section__lead{
      color: var(--muted);
      text-align:center;
      max-width: 820px;
      margin: 0 auto 14px;
      font-size: clamp(14px, 3.2vw, 16px);
    }

    .expect-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 860px){
      .expect-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 16px;
      }
    }

    .expect-card{
      background: rgba(15,19,30,.78);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      padding: 18px 16px;
      box-shadow: 0 16px 34px rgba(0,0,0,.36);
      transition: border-color .25s ease, transform .2s ease, background .25s ease, box-shadow .25s ease;
    }
    .expect-card:hover{
      transform: translateY(-2px);
      border-color: rgba(0,162,255,.36);
      background: rgba(15,19,30,.82);
      box-shadow: 0 20px 40px rgba(0,0,0,.42);
    }

    .expect-icon{
      --size: 40px;
      width: var(--size); height: var(--size);
      border-radius: 12px;
      background: linear-gradient(180deg, var(--blue), #00b3ff);
      color: #0f131e;
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 10px 24px rgba(0,162,255,.35);
      border: 1px solid rgba(255,255,255,.12);
      margin-bottom: 10px;
    }

    .expect-card h3{
      margin: 0 0 6px;
      font-size: clamp(16px, 3.8vw, 20px);
    }
    .expect-card p{
      margin: 0;
      color: var(--muted);
      font-size: clamp(14px, 3.4vw, 16px);
      line-height: 1.6;
    }

    .expect-cta{
      display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
      margin-top: 14px;
    }
    .expect-cta .btn{ min-height:44px; }
    .expect-cta .btn--ghost{
      border:1px solid var(--blue); border-radius:10px; background: transparent;
    }


 /* ===== QUEM VAI TE ATENDER — imagem forte à esquerda, texto à direita ===== */
 .who{
   /* FOCAL POINT: ajuste fino só mexendo este valor (em %) */
   --who-x: 20%;        /* quanto mais baixo, mais “puxa” a imagem para a esquerda */
   --who-minh: 520px;   /* altura mínima confortável no desktop */

   position: relative;
   padding: clamp(48px, 8vw, 100px) 0;
   min-height: clamp(420px, 60vh, var(--who-minh));
   background: url('me.png') var(--who-x) center / cover no-repeat;
   color: var(--text);
   overflow: clip;
   border-top: 1px solid rgba(255,255,255,.06);
   border-bottom: 1px solid rgba(255,255,255,.06);
 }

 /* Overlay separado para controlar contraste do lado direito */
 .who::before{
   content: "";
   position: absolute; inset: 0;
   /* gradiente mais escuro à direita, mais leve à esquerda para valorizar a foto */
   background:
     linear-gradient(90deg,
       rgba(15,19,30,.25) 0%,
       rgba(15,19,30,.55) 45%,
       rgba(15,19,30,.90) 78%,
       rgba(15,19,30,.94) 100%);
   pointer-events: none;
   z-index: 0;
 }

 .who .section__title{
   font-size: clamp(22px, 4.8vw, 34px);
   margin: 0 0 8px;
 }
 .who .section__title .hl{ color: var(--blue); }

 /* Conteúdo “ancorado” à direita em telas grandes */
 .who__content{
   max-width: 880px;
   margin-left: auto;   /* empurra para a direita no desktop */
   position: relative;
   z-index: 1;          /* acima do overlay */
   padding-right: clamp(0px, 4vw, 12px);
 }

 .who__copy{ display: grid; gap: 10px; }

 .who__lead{
   color: var(--muted);
   font-size: clamp(14px, 3.2vw, 18px);
   line-height: 1.6;
   margin: 4px 0 10px;
 }

 /* “Marcação” das frases-chave */
 .who__mark{
   margin: 8px 0;
   padding: 10px 12px;
   border-radius: 10px;
   background: rgba(0,162,255,.10);
   border: 1px solid rgba(0,162,255,.22);
   box-shadow: 0 6px 16px rgba(0,162,255,.12) inset;
   color: var(--text);
   line-height: 1.55;
 }
 .who__mark strong{ color: #e6f7ff; }
 .who__mark--emph{
   background: linear-gradient(180deg, var(--blue), #00b3ff);
   color: #0f131e;
   font-weight: 800;
   border: 1px solid rgba(255,255,255,.22);
   box-shadow: 0 10px 24px rgba(0,162,255,.28);
 }

 /* Microprovas */
 .who__trust{
   list-style: none; padding: 0; margin: 10px 0 16px;
   display:flex; flex-wrap:wrap; gap: 10px 16px; color:#cfd6dd; font-size: 13px;
 }
 .who__trust li{ position:relative; padding-left: 12px; }
 .who__trust li::before{
   content:""; position:absolute; left:0; top:8px;
   width:6px; height:6px; border-radius:50%; background: var(--blue);
 }

 /* CTAs */
 .who__cta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
 .who__cta .btn{ min-height:48px; }
 @media (max-width: 599px){
   .who__cta{ flex-direction: column; align-items: stretch; }
   .who__cta .btn{ width: 100%; }
 }

 /* Responsivo: em telas muito grandes, dê ainda mais espaço à foto à esquerda */
 @media (min-width: 1200px){
   .who{ --who-x: 16%; } /* “puxa” mais para a esquerda */
   .who::before{
     background:
       linear-gradient(90deg,
         rgba(15,19,30,.18) 0%,
         rgba(15,19,30,.52) 48%,
         rgba(15,19,30,.90) 78%,
         rgba(15,19,30,.96) 100%);
   }
 }

 /* Acessibilidade */
 .who :focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 10px; }

/* ===== FOOTER SLIM – estilo 2Gather, nas tuas cores ===== */
.footer-slim{
  background: #120d18; /* tom próximo do teu bg, levemente mais profundo */
  background: linear-gradient(180deg, rgba(15,19,30,0.92), rgba(15,19,30,0.92));
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--text);
  padding: clamp(12px, 2.8vw, 16px) 0;
}

.footer-slim__bar{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 14px;
}

/* desktop: três colunas como no print */
@media (min-width: 920px){
  .footer-slim__bar{
    grid-template-columns: 220px 1fr auto;
  }
}

/* selo/assinatura à esquerda */
.seal{
  display: inline-flex; align-items: center; justify-content: center;
  
  border-radius: 50%;
  transition: transform .2s ease, opacity .2s ease;
  opacity: .95;
}
.seal img{ width: 50px; }
.seal:hover{ transform: scale(1.02); opacity: 1; }
.seal svg{ width: 56px; height: 56px; display:block; }

/* copyright central */
.footer-slim__copy{
  margin: 0; text-align: center;
  color: #dde5ee;
  font-size: clamp(12px, 2.2vw, 14px);
}

/* direita: link + redes */
.footer-slim__links{
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
@media (min-width: 920px){
  .footer-slim__links{ justify-content: flex-end; }
}

.footer-slim__policy{
  color: var(--text);
  font-size: 14px;
  opacity: .9;
  transition: opacity .2s ease, color .2s ease;
}
.footer-slim__policy:hover{ color: var(--blue-hover); opacity: 1; }

/* ícones sociais com contorno (outline) */
.social{ display: inline-flex; gap: 10px; }
.social a{
  --size: 28px;
  width: var(--size); height: var(--size);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  border: 1.6px solid rgba(255,255,255,.85);
  border-radius: 6px;
  transition: transform .15s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.social a:hover{
  color: #09131a;
  background: linear-gradient(180deg, var(--blue), #00b3ff);
  border-color: rgba(255,255,255,1);
  box-shadow: 0 6px 18px rgba(0,162,255,.35);
}
.social svg{ width: 16px; height: 16px; }

@media (max-width: 919.98px){
  /* empilha items e dá respiro */
  .footer-slim__links{ flex-wrap: wrap; }
}

/* ===== Footer Slim — ajustes MOBILE ===== */
@media (max-width: 919.98px){
  /* Centraliza cada bloco do grid (selo, copy, links) */
  .footer-slim__bar{
    grid-template-columns: 1fr;
    justify-items: center;   /* deixa a logo centralizada */
    gap: 12px;
  }

  /* Selo/logo no centro */
  .seal{
    margin-inline: auto;
  }

  /* Política em cima e social (Instagram) ABAIXO */
  .footer-slim__links{
    display: flex;
    flex-direction: column;  /* quebra para coluna */
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .footer-slim__policy{
    order: 1;
  }
  .social{
    order: 2;                /* garante que fica abaixo da política */
    margin-top: 2px;
  }
}

/* ===== Footer Seal (logo maior sem distorcer) ===== */
.seal{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;          /* base maior que 56px */
  border-radius: 50%;
  overflow: hidden;                    /* recorta o zoom da imagem */
  isolation: isolate;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
  opacity: .96;
}

.seal::before{
  content:"";
  position:absolute; inset:0;
  border: none;
  pointer-events:none;
  z-index: 2;
}

/* A imagem da logo: zoom e microposicionamento controlados por variáveis */
.seal__img{
  object-fit: contain;
  z-index: 1;
}

/* ===================== MOBILE FIXES — COMO FUNCIONA ===================== */
@media (max-width: 859.98px){
  /* Texto centralizado e largura confortável */
  #como-funciona .section__title{ text-align: center; }
  #como-funciona .how__lead{
    text-align: center;
    margin-left: auto; margin-right: auto;
  }

  /* Empilha os passos (sem carrossel horizontal) */
  .steps__rail{
    display: grid;
    grid-auto-flow: row;             /* em vez de colunas */
    grid-auto-columns: unset;
    grid-template-columns: 1fr;      /* 1 por linha */
    gap: var(--space-3);
    overflow: visible;               /* remove scroll-x */
    scroll-snap-type: none;          /* remove snap */
    padding-bottom: 0;
    justify-items: center;           /* centraliza os cards */
  }

  .step{
    width: 100%;
    max-width: 640px;                /* evita ficar largo demais */
    text-align: center;
    margin-inline: auto;
  }

  .how__cta{ justify-content: center; }
}

/* ===================== MOBILE FIXES — PAIN SECTION ===================== */
@media (max-width: 819.98px){
  .pain-intro { text-align: center; }
  .pain-intro .section__lead{ margin-left: auto; margin-right: auto; }

  /* Grid já é 1fr no mobile; centraliza conteúdo dos cards */
  .pain-card{
    text-align: center;
  }
  .pain-icon{
    margin-left: auto; margin-right: auto;   /* ícone centralizado */
  }
  .pain-card h3,
  .pain-card p{ text-align: center; }
}

/* ===================== POLÍTICA DE PRIVACIDADE ===================== */
.legal-hero{
  padding: clamp(28px, 6vw, 48px) 0;
  background:
    radial-gradient(900px 420px at 70% 0%, rgba(0,162,255,.10), transparent 65%),
    linear-gradient(to bottom, var(--bg), #131a28);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.legal-hero__title{
  font-size: clamp(24px, 5.2vw, 36px);
  margin: 0 0 6px;
}
.legal-hero__lead{
  color: var(--muted);
  font-size: clamp(14px, 3.4vw, 18px);
  max-width: 840px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.legal{
  padding: clamp(28px, 6vw, 56px) 0;
}
.legal__wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 960px){
  .legal__wrap{
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
  }
}

.legal__card{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(15,19,30,.78);
}
.legal__card h2{
  margin-top: 0;
  font-size: clamp(18px, 3.8vw, 22px);
}
.legal__card p, .legal__card li{
  color: var(--muted);
  line-height: 1.65;
  font-size: clamp(14px, 3.2vw, 16px);
}
.legal__list{
  padding-left: 18px;
  margin: 10px 0 0;
}
.legal__list li{ margin: 6px 0; }
.legal__card .note{
  display:block;
  margin-top: 10px;
  font-size: 13px;
  color: #d7dee5;
  opacity: .95;
}

/* Layout responsivo das cards: empilha no mobile, 2 colunas no desktop largo */
@media (min-width: 960px){
  #coleta, #uso, #cookies, #compartilhamento, #base-legal, #direitos, #retencao, #contato-legal {
    grid-column: span 12;
  }
  #coleta, #uso { grid-column: span 6; }
  #cookies, #compartilhamento { grid-column: span 6; }
  #base-legal, #direitos { grid-column: span 6; }
  #retencao, #contato-legal { grid-column: span 6; }
}

/* CTA final dentro do legal */
.legal__cta{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top: 10px;
}
.legal__cta .btn--ghost{
  border:1px solid var(--blue); border-radius:10px; background: transparent;
}

/* Pequenos utilitários */
.muted{ color: var(--muted); }

/* Acessibilidade de foco coerente */
.legal a:focus-visible, .stage-nav a:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 8px;
}