/* ===== TOKENS =====
     Rampa neutra de 9 passos: papel morno no claro, tinta fria no escuro. É a
     mesma rampa nos dois modos, só trocando as pontas — por isso o site inverte
     inteiro sem nenhuma regra de componente saber que existe modo escuro.

     Os nomes antigos (--bg, --text, --border...) continuam existindo como apelido
     dos semânticos, senão as ~400 regras abaixo quebrariam todas de uma vez.

     Modo escuro por @media e não por light-dark(): se light-dark() não for
     suportado a custom property fica inválida e a página abre sem cor nenhuma.
     Num site que é a prova de que a empresa entrega, isso não é risco aceitável. */
  :root{
    color-scheme:light dark;

    /* rampa neutra */
    --n0:#FFFFFF;
    --n1:#F7F6F3;
    --n2:#EFEDE8;
    --n3:#E2DFD8;
    --n4:#C8C5BC;
    --n5:#9A9890;
    --n6:#6E7480;
    --n7:#454B55;
    --n8:#232935;
    --n9:#0A0F1A;

    /* semânticos */
    --paper:var(--n1);
    --paper-2:var(--n2);
    --surface:var(--n0);
    --fg:var(--n9);
    --fg-2:#4A4F58;
    --fg-3:var(--n6);
    --hair:color-mix(in srgb,var(--n9) 11%,transparent);
    --hair-strong:color-mix(in srgb,var(--n9) 18%,transparent);

    /* acento funcional — não é mais protagonista, é sinal */
    --accent:#2563EB;
    --accent-2:#12B5D6;
    --accent-hover:#1D4FD0;
    --accent-soft:#EAF1FE;

    /* painéis escuros (suporte, rodapé) — escuros nos dois modos */
    --ink:#0A1526;
    --ink-2:#0F1E38;
    --border-ink:rgba(255,255,255,.12);

    /* apelidos do sistema antigo */
    --bg:var(--paper);
    --bg-2:var(--paper-2);
    --text:var(--fg);
    --body:var(--fg-2);
    --muted:var(--fg-3);
    --border:var(--hair);

    /* escala tipográfica */
    /* 4.5rem fazia "Produtos digitais" precisar de 561px numa coluna de 486px, e a
       headline quebrava em 4 linhas. 4.1rem cabe em uma linha nos dois idiomas. */
    --fs-display:clamp(2.5rem,4.6vw,4.1rem);
    --fs-h1-page:clamp(2.1rem,4.6vw,3.3rem);
    --fs-h2:clamp(2rem,3.8vw,3rem);
    --fs-h3:clamp(1.7rem,2.6vw,2.15rem);
    --fs-lead:clamp(1.05rem,1.5vw,1.2rem);
    --fs-body:1.04rem;
    --fs-meta:.86rem;

    /* material: fonte de luz única no topo */
    --radius:18px;
    --lift:-3px;
    --shadow:0 1px 2px color-mix(in srgb,var(--n9) 5%,transparent),0 10px 30px color-mix(in srgb,var(--n9) 7%,transparent);
    --shadow-lg:0 2px 4px color-mix(in srgb,var(--n9) 4%,transparent),0 12px 28px color-mix(in srgb,var(--n9) 8%,transparent),0 34px 70px color-mix(in srgb,var(--n9) 12%,transparent);

    --font:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
    --display:'Space Grotesk','Inter',-apple-system,Arial,sans-serif;
  }

  @media (prefers-color-scheme: dark){
    :root{
      --n0:#161D2A;
      --n1:#0B0F17;
      --n2:#111722;
      --n3:#1B2331;
      --n4:#2C3543;
      --n5:#5B6474;
      --n6:#8A93A2;
      --n7:#B4BCC8;
      --n8:#D8DCE3;
      --n9:#F2F1ED;

      --fg-2:#A8AFBA;
      --hair:color-mix(in srgb,#FFFFFF 11%,transparent);
      --hair-strong:color-mix(in srgb,#FFFFFF 20%,transparent);

      /* azul puro sobre fundo escuro não atinge contraste de leitura */
      --accent:#7BA5FF;
      --accent-2:#3DD2EF;
      --accent-hover:#9BBBFF;
      --accent-soft:color-mix(in srgb,#7BA5FF 14%,transparent);

      --ink:#080C14;
      --ink-2:#0D1421;

      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.34);
      --shadow-lg:0 2px 4px rgba(0,0,0,.34),0 12px 28px rgba(0,0,0,.4),0 34px 70px rgba(0,0,0,.5);
    }
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--body);font-family:var(--font);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  p,li,.sec-sub,.lead{text-wrap:pretty}
  ::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
  img{max-width:100%}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,.display{font-family:var(--display);text-wrap:balance}
  /* número é dado, não texto: largura fixa por dígito faz o valor parar de
     dançar quando ele muda, e é o detalhe que dá cara de instrumento */
  .hero-meta b,.showcase-stats span,.browser-bar{font-variant-numeric:tabular-nums}

  .skip-link{position:absolute;left:10px;top:10px;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;transform:translateY(-160%);transition:transform .2s}
  .skip-link:focus{transform:none}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .hp{display:none}
  .block-alt{background:var(--bg-2)}

  /* ===== NAV ===== */
  nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
    padding:16px 5vw;background:color-mix(in srgb,var(--paper) 76%,transparent);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s,padding .4s}
  nav.scrolled{border-bottom-color:var(--border);box-shadow:0 6px 26px color-mix(in srgb,var(--n9) 6%,transparent);padding-top:12px;padding-bottom:12px}
  .nav-logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;letter-spacing:.2px;color:var(--text)}
  .nav-logo img{width:34px;height:auto}
  .nav-logo span i{font-style:normal;color:var(--muted);font-weight:500}
  .nav-right{display:flex;align-items:center;gap:28px}
  .nav-links{display:flex;gap:28px;font-size:.94rem;font-weight:500;color:var(--body)}
  .nav-links a{position:relative;transition:color .25s}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--accent);transition:right .3s}
  .nav-links a:hover{color:var(--text)} .nav-links a:hover::after{right:0}
  .lang-toggle{display:flex;gap:6px;align-items:center}
  .lang-toggle button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:10px;cursor:pointer;opacity:.45;filter:saturate(.8);transition:opacity .2s,transform .2s}
  .lang-toggle button svg{width:25px;height:18px;border-radius:3px;box-shadow:0 1px 3px rgba(16,32,58,.28);display:block}
  .lang-toggle button:hover{opacity:.8;transform:translateY(-1px)}
  .lang-toggle button.on{opacity:1;filter:none}
  .lang-toggle button.on svg{box-shadow:0 0 0 2px var(--accent),0 2px 7px rgba(16,32,58,.3)}
  .lang-toggle button:focus-visible,.nav-links a:focus-visible,.link-arrow:focus-visible,.btn:focus-visible,.footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
  /* a barra saiu do listener de scroll do JS: agora ela é função da posição da
     página, calculada pelo compositor. Sem suporte, ela não aparece — é decoração. */
  #progress{position:absolute;bottom:-1px;left:0;height:2px;width:100%;transform-origin:0 50%;scale:0 1;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
  @keyframes progress-grow{from{scale:0 1}to{scale:1 1}}
  @supports (animation-timeline: scroll(root)){
    #progress{animation:progress-grow linear both;animation-timeline:scroll(root)}
  }
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:9px;margin-right:-9px;color:var(--text)}
  .nav-toggle svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;display:block}
  @media(max-width:860px){
    .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:color-mix(in srgb,var(--paper) 97%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:6px 5vw 16px;display:none}
    nav.nav-open .nav-links{display:flex}
    .nav-links a{padding:14px 2px;border-top:1px solid var(--border);font-size:1.05rem}
    .nav-links a::after{display:none}
    .nav-toggle{display:block}
  }
  @media(max-width:380px){ .lang-toggle{display:none} nav.nav-open .lang-toggle{display:flex;margin-top:12px} }

  /* ===== HERO ===== */
  /* o fundo do hero era decoração por cima do canvas de partículas; sem o canvas
     ele passa a ser o fundo inteiro, então ganha um grau a mais de presença */
  .hero{position:relative;overflow:hidden;background:
    radial-gradient(58% 48% at 10% 4%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%),
    radial-gradient(48% 44% at 94% 18%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 62%),
    radial-gradient(70% 60% at 50% 100%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%),var(--bg)}
  .hero-grid{max-width:1200px;margin:0 auto;padding:150px 5vw 90px;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:600;
    border:1px solid rgba(37,99,235,.2);border-radius:999px;padding:7px 16px;margin-bottom:26px;background:var(--accent-soft)}
  .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
  /* 1.02 cortava a descendente do "g" em headline PT de duas linhas */
  h1{font-size:var(--fs-display);line-height:1.07;font-weight:700;letter-spacing:-.03em;color:var(--text)}
  h1 em{font-style:normal;color:var(--accent)}
  .hero-sub{margin:26px 0 38px;max-width:520px;color:var(--body);font-size:var(--fs-lead)}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:12px;font-family:var(--font);font-weight:600;font-size:1rem;cursor:pointer;border:0;transition:transform 180ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1), background 180ms ease, border-color 180ms ease, color 180ms ease;will-change:transform}
  .btn:active{transform:scale(0.96) translateY(1px);transition-duration:80ms}
  .btn-primary{background:var(--accent);color:var(--n0);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 22%,transparent)}
  .btn-primary:hover{background:var(--accent-hover);transform:translateY(var(--lift));box-shadow:0 14px 32px color-mix(in srgb,var(--accent) 32%,transparent)}
  .btn-ghost{border:1px solid var(--hair-strong);color:var(--text);background:var(--surface)}
  .btn-ghost:hover{transform:translateY(var(--lift));border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow)}
  .hero-meta{display:flex;gap:30px;margin-top:44px;flex-wrap:wrap}
  .hero-meta div{display:flex;flex-direction:column}
  .hero-meta b{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--text);line-height:1}
  .hero-meta span{font-size:.82rem;color:var(--muted);margin-top:6px;letter-spacing:.3px}

  /* hero product composition */
  .hero-visual{position:relative;min-height:520px}
  .hv-glow{position:absolute;inset:6% 4%;background:radial-gradient(50% 50% at 60% 40%,rgba(37,99,235,.16),transparent 70%),radial-gradient(45% 45% at 30% 75%,rgba(18,181,214,.14),transparent 70%);filter:blur(10px)}
  .hv-browser{position:absolute;top:6%;left:-2%;width:75%;transform:rotate(-5deg);animation:floatA 12s ease-in-out infinite}
  .hv-phone{position:absolute;bottom:-2%;right:2%;width:190px;transform:rotate(4deg);animation:floatB 10s ease-in-out infinite}
  @keyframes floatA{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-16px)}}
  @keyframes floatB{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-20px)}}
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;text-align:center;padding-top:130px;gap:40px}
    .eyebrow,.hero-meta{justify-content:center} .hero-sub{margin-left:auto;margin-right:auto}
    .cta-row{justify-content:center}
    /* empilhados e centralizados, os dois botões tinham larguras diferentes e o
       bloco ficava torto; em coluna eles alinham nas duas bordas */
    @media(max-width:520px){
      .cta-row{flex-direction:column;align-items:stretch}
      .cta-row .btn{justify-content:center}
    }
    .hero-visual{min-height:440px;max-width:440px;margin:0 auto}
    .hv-browser{width:88%;left:6%}
    .hv-phone{right:0}
  }

  /* ===== device frames ===== */
  .browser{width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:var(--surface);box-shadow:var(--shadow-lg)}
  .browser-bar{height:32px;background:var(--paper-2);display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--hair)}
  .browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--n4);display:block}
  .browser-view{height:250px;--vh:250px;overflow:hidden;position:relative}
  .phone{width:100%;border-radius:34px;border:1px solid var(--hair-strong);background:#0B1424;padding:8px;box-shadow:var(--shadow-lg)}
  .phone-notch{width:54px;height:5px;border-radius:99px;background:#2A3852;margin:2px auto 7px}
  .phone-view{height:330px;--vh:330px;overflow:hidden;position:relative;border-radius:26px;background:#0B1424}
  .shot{width:100%;display:block;will-change:transform}
  .browser-view .shot{animation:scrollShot 18s ease-in-out infinite alternate}
  .browser-view .shot-static{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
  .phone-view .shot{animation:scrollShot 26s ease-in-out infinite alternate}
  .phone-view video{width:100%;height:100%;object-fit:cover;display:block}
  @keyframes scrollShot{from{transform:translateY(0)}to{transform:translateY(calc(-100% + var(--vh)))}}

  /* ===== SECTIONS ===== */
  section.block{padding:110px 5vw}
  .wrap{max-width:1160px;margin:0 auto}
  .sec-head{max-width:640px;margin-bottom:64px}
  .sec-eyebrow{color:var(--accent);font-size:.8rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;font-weight:600}
  h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.025em;margin-bottom:16px;color:var(--text);line-height:1.1}
  .sec-sub{color:var(--body);font-size:1.06rem}

  .reveal.in{opacity:1;transform:none}
  html.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .reveal.d1{transition-delay:.09s}html.js .reveal.d2{transition-delay:.18s}html.js .reveal.d3{transition-delay:.27s}
  html.js .hero .reveal{opacity:1;transform:none;transition:none}
  html.js .page-head .reveal{opacity:1;transform:none;transition:none}

  /* ===== PRODUTOS (showcase) ===== */
  .showcase{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:center;margin-bottom:104px}
  .showcase:last-child{margin-bottom:0}
  .showcase:nth-child(even) .showcase-media{order:2}
  .showcase-media{position:relative;display:flex;justify-content:center;align-items:center;padding:34px;border-radius:26px;
    background:linear-gradient(150deg,var(--paper-2),var(--n3))}
  .showcase-media .browser{max-width:460px}
  .showcase-media .phone{max-width:230px}
  /* o fundo de .showcase-media e de .dark é definido por --media-bg no fim do
     arquivo, junto com a varredura de luz */
  .tag{display:inline-flex;align-items:center;font-size:.76rem;letter-spacing:2px;text-transform:uppercase;padding:6px 13px;border-radius:999px;border:1px solid var(--border);color:var(--muted);margin-bottom:18px;font-weight:600}
  .showcase-body h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.025em;color:var(--text);margin-bottom:12px}
  .showcase-stats{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:18px}
  .showcase-stats span{font-family:var(--display);font-weight:600;color:var(--accent);font-size:.92rem}
  .showcase-body p{color:var(--body);font-size:1.04rem;margin-bottom:26px;max-width:440px}
  .link-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--accent);transition:gap .25s}
  .link-arrow:hover{gap:14px}
  /* o Trainer saiu nas duas lojas: os selos ficam lado a lado e quebram
     juntos em tela estreita */
  .appstore-badge{display:inline-block;margin:0 10px 10px 0;transition:transform .25s}
  .appstore-badge:hover{transform:translateY(-2px)}
  .appstore-badge svg{display:block}
  @media(max-width:820px){
    .showcase{grid-template-columns:1fr;gap:32px;margin-bottom:72px}
    .showcase:nth-child(even) .showcase-media{order:0}
    .showcase-media .phone{max-width:210px}
  }

  /* ===== PARCERIA DO GRUPO (C&A) =====
     O logotipo da C&A tem fundo escuro próprio, então o cartão da marca também é
     escuro — num cartão claro o logo apareceria como um quadrado preto colado. */
  .group-card{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:center;
    border:1px solid var(--border);border-radius:26px;padding:38px;margin-bottom:96px;
    background:linear-gradient(160deg,var(--surface),var(--paper-2))}
  .group-brand{border-radius:20px;overflow:hidden;background:#050B18;box-shadow:var(--shadow-lg)}
  .group-brand img{display:block;width:100%;height:auto}
  .group-preview{border-top:1px solid rgba(255,255,255,.16)}
  .group-body h3{font-family:var(--display);font-size:clamp(1.45rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-.5px;color:var(--text);margin-bottom:24px}
  .group-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:24px}
  .group-split strong{display:block;font-family:var(--display);font-size:1rem;color:var(--accent);margin-bottom:7px}
  .group-split p{font-size:.96rem;color:var(--body)}
  .group-proof{font-size:.96rem;color:var(--body);padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:18px}
  .group-proof strong{color:var(--accent);font-family:var(--display)}
  .group-note{font-size:.96rem;color:var(--muted);padding-left:16px;border-left:2px solid var(--accent-2);margin-bottom:24px}
  @media(max-width:820px){
    .group-card{grid-template-columns:1fr;gap:30px;padding:26px;margin-bottom:64px}
    .group-brand{max-width:220px}
    .group-split{grid-template-columns:1fr;gap:20px}
  }

  /* ===== CARTÃO INTEIRO CLICÁVEL — só na parceria do grupo =====
     Um único <a> por cartão (no <h3>, ou no CTA quando o título não descreve o
     destino) e um ::after esticado que cobre o cartão. Nada de <a> dentro de
     <a>: continua um link só por cartão, com nome próprio ("Brasileiros FL"
     em vez de cinco "Visitar o site" idênticos), e o teclado funciona de graça.

     Nada aqui mora dentro de @media, e nada depende de :hover — toque não tem
     hover, e a área clicável precisa ser a mesma no celular e no desktop. */
  #clientes .showcase,
  #clientes .group-card{position:relative}
  #clientes .card-link::after{
    content:"";position:absolute;inset:0;
    /* .showcase-media é position:relative e, nos cartões de ordem par, o
       `order:2` faz ele pintar DEPOIS do corpo do cartão. Sem este z-index o
       overlay ficaria por baixo da imagem e tocar nela não abriria nada. */
    z-index:1;
  }
  /* O texto corrido sobe ACIMA do overlay. Sem isto, medido no parágrafo:
     elementFromPoint devolvia o <a>, o cursor era `pointer` e
     caretRangeFromPoint caía no texto do link, não no do parágrafo — ou seja,
     o mousedown ia para o link e a seleção de texto ficava prejudicada.
     Com isto, o parágrafo volta a ser texto selecionável e a imagem, o nome,
     a tag e o resto do cartão seguem abrindo o link. */
  #clientes .showcase-body > p,
  #clientes .showcase-stats,
  #clientes .group-split,
  #clientes .group-proof,
  #clientes .group-note{position:relative;z-index:2}

  /* os estados passam a responder ao cartão inteiro, não só ao link */
  #clientes .card-link{transition:color .25s}
  #clientes .showcase:hover .card-link{color:var(--accent)}
  #clientes .showcase:hover .link-arrow,
  #clientes .group-card:hover .link-arrow{gap:14px}
  #clientes .showcase:hover .showcase-media{--sweep:-150%;box-shadow:var(--shadow-lg)}
  #clientes .showcase:hover .showcase-media .browser{transform:translateY(var(--lift))}
  /* em toque não há hover: o :active é o único aviso de que o dedo pegou o
     cartão. Reusa o mesmo --lift do hover, não é movimento novo. */
  #clientes .showcase:has(.card-link:active) .showcase-media .browser{transform:translateY(var(--lift))}

  /* Foco de teclado no cartão inteiro. :focus-within também acenderia no
     clique de mouse; :has(:focus-visible) só acende no teclado. Onde :has()
     não existir, o próprio link mostra o foco — nunca fica invisível. */
  #clientes .card-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
  #clientes .showcase:has(.card-link:focus-visible),
  #clientes .group-card:has(.card-link:focus-visible){
    outline:2px solid var(--accent);outline-offset:6px;border-radius:28px;
  }
  #clientes .showcase:has(.card-link:focus-visible) .card-link,
  #clientes .group-card:has(.card-link:focus-visible) .card-link{outline:none}

  /* ===== COMO CRIAMOS ===== */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
  .step{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:34px 28px;transition:transform .35s,box-shadow .35s}
  .step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
  .step .num{font-family:var(--display);font-size:.85rem;font-weight:700;color:var(--accent-hover);letter-spacing:1px}
  .step .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:14px 0 18px;background:var(--accent-soft)}
  .step .ico svg{width:23px;height:23px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .step h3{font-size:1.2rem;font-weight:600;color:var(--text);margin-bottom:9px}
  .step p{color:var(--body);font-size:.95rem}

  /* ===== SOBRE ===== */
  .bio{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:center}
  @media(max-width:860px){.bio{grid-template-columns:1fr;gap:36px}.bio .portrait{max-width:260px;margin:0 auto}}
  .portrait{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
  .portrait img{width:100%;height:100%;object-fit:cover;display:block}
  .bio h2{margin-bottom:6px}
  .bio .role{color:var(--accent);font-size:.92rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:22px;font-weight:600}
  .bio p{color:var(--body);margin-bottom:16px;font-size:1.04rem}
  .creds{margin-top:30px;display:grid;gap:22px}
  .cred-group h3{font-family:var(--font);font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:13px;font-weight:700}
  .chips{display:flex;flex-wrap:wrap;gap:9px}
  .chips span{font-size:var(--fs-meta);color:var(--text);border:1px solid var(--hair);padding:7px 14px;border-radius:999px;background:var(--surface);transition:border-color .25s,color .25s,transform .25s}
  .chips span:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
  /* lista de certificações: filete de 1px entre as linhas feito pelo gap sobre o
     fundo, e o período em tabular-nums — é dado, então alinha coluna por coluna */
  .cert-issuer{font-size:var(--fs-meta);color:var(--accent);font-weight:600;margin-bottom:12px}
  .certs{list-style:none;display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
  .certs li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 15px;background:var(--surface);font-size:.95rem}
  .certs b{color:var(--text);font-weight:600}
  .certs li>span{color:var(--muted);font-size:var(--fs-meta);font-variant-numeric:tabular-nums;white-space:nowrap}
  @media(max-width:520px){
    .certs li{flex-direction:column;gap:3px}
    .certs li>span{white-space:normal}
  }

  /* ===== SUPORTE ===== */
  .support{background:linear-gradient(160deg,var(--ink-2),var(--ink));border-radius:30px;padding:66px 6vw;color:#fff;position:relative;overflow:hidden}
  .support::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 80% 0%,rgba(18,181,214,.18),transparent 60%),radial-gradient(50% 60% at 10% 100%,rgba(37,99,235,.2),transparent 60%);pointer-events:none}
  .support .contact-head{text-align:center;margin-bottom:40px;position:relative}
  .support .sec-eyebrow{color:var(--accent-2)}
  .support h2{color:#fff}
  .support .contact-head p{color:#B9C6DA;max-width:520px;margin:0 auto;font-size:1.04rem}
  form{max-width:640px;margin:0 auto;display:grid;gap:16px;position:relative}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:640px){.form-row{grid-template-columns:1fr}}
  label{display:block;font-size:.8rem;letter-spacing:.5px;color:#9FB0C8;margin-bottom:7px;text-transform:uppercase;font-weight:600}
  input,textarea,select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border-ink);border-radius:12px;color:#fff;padding:14px 15px;font-family:inherit;font-size:.98rem;transition:border-color .25s,box-shadow .25s,background .25s}
  input::placeholder,textarea::placeholder{color:#7E90AC}
  select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239FB0C8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
  select option{color:#0C1626}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-2);background:rgba(255,255,255,.09);box-shadow:0 0 0 3px rgba(18,181,214,.18)}
  /* o campo cresce com o que a pessoa escreve, em vez de obrigar a arrastar a alça */
  textarea{min-height:140px;max-height:60vh;resize:vertical;field-sizing:content}
  .form-submit{text-align:center;margin-top:6px}
  .form-note{text-align:center;font-size:.82rem;color:#8CA0BC;margin-top:14px}

  /* ===== FOOTER ===== */
  footer{background:var(--ink);color:#9FB0C8;padding:56px 5vw 40px}
  .footer-in{max-width:1160px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap}
  .footer .nav-logo{color:#fff}
  .footer .nav-logo span i{color:#A9B6CC}
  .footer-tag{color:#8093AE;font-size:.92rem;margin-top:12px;max-width:280px}
  .footer-links{display:flex;gap:26px;flex-wrap:wrap}
  .footer-links a{color:#9FB0C8;transition:color .25s}
  .footer-links a:hover{color:#fff}
  .footer-copy{max-width:1160px;margin:36px auto 0;padding-top:22px;border-top:1px solid var(--border-ink);font-size:.85rem;color:#7E90AC}

  .build-shot{max-width:940px;margin:0 auto 46px;border-radius:18px;overflow:hidden;box-shadow:0 34px 70px -34px rgba(11,23,48,.5);border:1px solid var(--border-ink);position:relative}
  .build-shot img{width:100%;height:auto;display:block}
  @media(max-width:860px){.build-shot{margin-bottom:34px}}

  .founder-band{padding:0 5vw 96px}
  .fb-media{position:relative;max-width:1160px;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,23,48,.55);border:1px solid var(--border-ink)}
  .fb-media img{width:100%;height:auto;display:block}
  @media(max-width:860px){.founder-band{padding-bottom:64px}}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .reveal,html.js .reveal{opacity:1;transform:none;animation-timeline:none!important}
    .shot{transform:none!important}
    #progress{animation-timeline:none!important;scale:1 1}
    *{view-transition-name:none!important}
  }


  /* ===== interior pages (sobre / time) ===== */
  .page-head{max-width:1160px;margin:0 auto;padding:150px 5vw 8px;text-align:center}
  .page-head .sec-eyebrow{margin-bottom:14px}
  .page-head h1{font-size:var(--fs-h1-page);font-weight:700;letter-spacing:-.028em;color:var(--text);line-height:1.1}
  .page-head .lead{max-width:640px;margin:18px auto 0;color:var(--body);font-size:1.08rem}
  .page-section{padding:48px 5vw 110px}
  .page-section .bio{margin-top:8px}

  /* ===== team ===== */
  .team-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  @media(max-width:760px){.team-grid{grid-template-columns:1fr}}
  .member{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}
  .member:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
  .member-top{display:flex;align-items:center;gap:18px;margin-bottom:16px}
  .member-photo{width:96px;height:96px;border-radius:20px;overflow:hidden;flex:0 0 auto;border:1px solid var(--border);box-shadow:var(--shadow)}
  .member-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .member h3{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--text);letter-spacing:-.4px;line-height:1.15}
  .member .role{color:var(--accent);font-size:.8rem;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;margin-top:5px}
  .member p{color:var(--body);font-size:1rem;margin-bottom:14px}
  .member .chips{margin:2px 0 20px}
  .member-links{margin-top:auto;display:flex;gap:20px;flex-wrap:wrap;align-items:center}

  /* ===== TUDO O QUE ESTÁ NO AR =====
     Índice de links antes do rodapé: os endereços dos produtos e dos sites de
     cliente estavam só dentro dos cards, no meio da página. Aqui viram uma
     lista clicável, com o que cada um é. */
  /* contain-intrinsic-size com "auto": o navegador guarda a altura real depois do
     primeiro render, então a barra de rolagem não pula na segunda visita */
  .no-ar{background:var(--bg-2);border-top:1px solid var(--border);content-visibility:auto;contain-intrinsic-size:auto 900px}
  .ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 52px;margin-top:34px}
  .ar-col h3{
    font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);margin-bottom:16px;
    padding-bottom:12px;border-bottom:1px solid var(--border);
  }
  .ar-col ul{list-style:none;display:grid;gap:2px}
  .ar-col li{margin:0}
  .ar-col a{
    display:flex;flex-direction:column;gap:3px;
    padding:14px 16px;margin-left:-16px;border-radius:12px;
    text-decoration:none;transition:background .22s,transform .22s;
  }
  .ar-col a:hover{background:var(--surface);transform:translateX(4px);box-shadow:var(--shadow)}
  .ar-col a b{
    font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--text);
    display:flex;align-items:center;gap:9px;
  }
  .ar-col a b::after{
    content:"→";color:var(--accent);font-size:.92rem;
    opacity:0;transform:translateX(-5px);transition:opacity .22s,transform .22s;
  }
  .ar-col a:hover b::after{opacity:1;transform:translateX(0)}
  .ar-col a span{font-size:.88rem;color:var(--muted);line-height:1.45}
  @media(max-width:820px){
    .ar-grid{grid-template-columns:1fr;gap:26px}
  }

  /* atalhos no fim da parceria do grupo: os quatro endereços juntos, para quem
     leu os cards não ter de voltar atrás procurando cada link */
  .ca-atalhos{
    display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;
    margin-top:22px;padding:22px 26px;
    background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);
  }
  .ca-atalhos-rotulo{
    font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--muted);
  }
  .ca-atalhos ul{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0}
  .ca-atalhos a{
    display:inline-flex;align-items:center;gap:8px;
    padding:9px 17px;border-radius:999px;
    background:var(--surface);border:1px solid var(--hair);
    font-family:var(--display);font-size:.93rem;font-weight:600;color:var(--text);
    transition:border-color .22s,color .22s,transform .22s,box-shadow .22s;
  }
  .ca-atalhos a::after{content:"↗";font-size:.82rem;color:var(--accent)}
  .ca-atalhos a:hover{
    border-color:var(--accent);color:var(--accent);
    transform:translateY(-2px);box-shadow:var(--shadow);
  }
  @media(max-width:640px){
    .ca-atalhos{flex-direction:column;align-items:flex-start;padding:18px 20px}
  }

  /* ===== FEEDBACK DE TOQUE ===== */
  .appstore-badge:active {
    transform: scale(0.96);
    transition: transform 80ms ease;
  }
  .lang-toggle button:active {
    transform: scale(0.92);
  }
  .nav-logo:active, .nav-links a:active, .link-arrow:active {
    transform: scale(0.98);
  }

  /* ===== TRANSIÇÃO ENTRE PÁGINAS =====
     Home → /sobre → /time deixam de piscar branco. Navegador sem suporte
     simplesmente navega como antes. */
  @view-transition{ navigation:auto }
  ::view-transition-group(root){ animation-duration:220ms }
  nav,footer{ view-transition-name:none }

  /* ===== REVEAL PELA POSIÇÃO DE SCROLL =====
     Substitui o IntersectionObserver onde o navegador souber: a animação passa a
     ser função da posição do elemento, não de um evento de JS. O observer continua
     em app.js como rede de segurança para quem não tem view(). */
  @keyframes reveal-in{ to{ opacity:1; transform:none } }
  @supports (animation-timeline: view()){
    html.js .reveal{
      transition:none;
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 20%;
    }
    html.js .reveal.d1{animation-range:entry 6% cover 24%}
    html.js .reveal.d2{animation-range:entry 8% cover 28%}
    html.js .reveal.d3{animation-range:entry 10% cover 32%}
    html.js .hero .reveal,html.js .page-head .reveal{animation:none;opacity:1;transform:none}
  }

  /* ===== GALERIA DE PRODUTOS =====
     Era um pin do ScrollTrigger que travava a página inteira para arrastar o track.
     Agora é scroll-snap nativo com três sinais de que existe mais coisa ao lado:
     o próximo card aparece cortado na borda (funciona em todo navegador), bolinhas
     de posição clicáveis e setas — as duas últimas por ::scroll-marker e
     ::scroll-button, sem uma linha de JS. */
  .gallery-container{
    position:relative;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-color:var(--accent) var(--paper-2);
    scrollbar-width:thin;
    padding:20px 0 8px;
  }
  .gallery-track{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:clamp(18px,2.4vw,36px);
    /* alinhamento no início e não no centro: a borda esquerda do card cai na mesma
       vertical do título da seção, e o corte do vizinho fica sempre à direita — no
       sentido da leitura. O padding no fim é o que permite o último card também
       alcançar a posição inicial. */
    padding-inline-start:0;
    padding-inline-end:max(180px,20vw);
    width:max-content;
  }
  .gallery-track .showcase{
    width:min(84vw,980px);
    scroll-snap-align:start;
    scroll-snap-stop:always;
    flex-shrink:0;
    margin-bottom:0;
    padding:clamp(24px,3vw,40px);
    border:1px solid var(--hair);
    border-radius:26px;
    background:var(--surface);
    box-shadow:var(--shadow);
  }
  /* o CSS do pin anulava o layout alternado; volta a alternar */
  .gallery-track .showcase:nth-child(even) .showcase-media{ order:2 }
  @media(max-width:820px){
    .gallery-track .showcase:nth-child(even) .showcase-media{ order:0 }
    /* card mais estreito no celular para o corte do vizinho render uns 47px em
       vez de 32px — abaixo disso ninguém percebe que dá para arrastar */
    .gallery-track .showcase{ width:74vw }
    .gallery-track{ padding-inline-end:30vw }
  }

  /* bolinhas de posição — "card 2 de 3", clicáveis */
  .gallery-container{ scroll-marker-group:after }
  .gallery-container::scroll-marker-group{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding-top:22px;
  }
  .gallery-track .showcase::scroll-marker{
    content:"";
    width:9px;
    height:9px;
    border-radius:50%;
    border:1.5px solid var(--n5);
    background:transparent;
    cursor:pointer;
    transition:background 240ms,border-color 240ms,width 240ms;
  }
  .gallery-track .showcase::scroll-marker:hover{ border-color:var(--accent) }
  .gallery-track .showcase::scroll-marker:target-current{
    background:var(--accent);
    border-color:var(--accent);
    width:26px;
    border-radius:99px;
  }

  /* setas — só aparecem onde há para onde ir; o navegador desabilita sozinho
     a seta da ponta, e :disabled some com ela */
  .gallery-container{ anchor-name:--galeria }
  /* a seta fica por cima do card vizinho, então ela usa o inverso da página em vez
     de uma cor da própria página: círculo claro no escuro, escuro no claro. Com
     fundo translúcido da mesma família ela ficava invisível sobre o card. */
  .gallery-container::scroll-button(*){
    position:fixed;
    position-anchor:--galeria;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:var(--fg);
    color:var(--paper);
    font-size:1.4rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:var(--shadow-lg);
    transition:transform 200ms cubic-bezier(.22,1,.36,1),background 200ms;
  }
  .gallery-container::scroll-button(*):hover{
    background:var(--accent);
    color:var(--n0);
    transform:scale(1.08);
  }
  .gallery-container::scroll-button(*):active{ transform:scale(.94) }
  .gallery-container::scroll-button(*):disabled{ opacity:0; pointer-events:none }
  /* as setas ficam na calha entre o card e a borda da tela, nunca por cima do
     texto — com margem negativa elas cobriam a primeira letra de cada linha */
  .gallery-container::scroll-button(left){
    content:"\2039";
    position-area:left center;
    margin-right:6px;
  }
  .gallery-container::scroll-button(right){
    content:"\203A";
    position-area:right center;
    margin-left:6px;
  }
  /* abaixo disso a calha não cabe o botão, e no toque o arraste com o card cortado
     na borda já é o sinal — as bolinhas continuam */
  @media(max-width:1024px){
    .gallery-container::scroll-button(*){ display:none }
  }
  /* onde há bolinhas, a barra de rolagem some — dois indicadores da mesma coisa
     é ruído. Onde não há, a barra fica: é o único sinal que sobra. */
  @supports selector(::scroll-marker-group){
    .gallery-container{ scrollbar-width:none }
    .gallery-container::-webkit-scrollbar{ display:none }
  }

  /* ===== MATERIAL: LUZ ÚNICA NO TOPO =====
     Substitui o tilt 3D. Em vez de girar o cartão, a luz corre por cima dele —
     é o que material de verdade faz, e não precisa de perspectiva falsa. */
  @property --sweep{
    syntax:"<percentage>";
    inherits:false;
    initial-value:150%;
  }
  .showcase-media{
    --media-bg:linear-gradient(150deg,var(--paper-2),var(--n3));
    background:
      linear-gradient(104deg,transparent 38%,color-mix(in srgb,var(--n0) 62%,transparent) 50%,transparent 62%) var(--sweep) 0 / 260% 100% no-repeat,
      var(--media-bg);
    transition:--sweep 820ms cubic-bezier(.22,1,.36,1),box-shadow 420ms cubic-bezier(.22,1,.36,1);
  }
  .showcase-media.dark{ --media-bg:linear-gradient(150deg,var(--ink-2),var(--ink)) }
  .showcase-media:hover{
    --sweep:-150%;
    box-shadow:var(--shadow-lg);
  }
  .showcase-media .browser,.showcase-media .phone{
    transition:transform 420ms cubic-bezier(.22,1,.36,1);
  }
  .showcase-media:hover .browser,.showcase-media:hover .phone{
    transform:translateY(var(--lift));
  }