<script>
    import { onMount } from 'svelte';
    import { fly } from 'svelte/transition';
    import { 
        Zap, 
        Clock, 
        Shield, 
        Code, 
        Smartphone, 
        TrendingUp,
        ArrowRight,
        CheckCircle,
        QrCode,
        Repeat,
        Download,
        ChevronDown,
        UserPlus,
        Settings
    } from 'lucide-svelte';
    
    import Header from '$lib/components/Header.svelte';
    import Footer from '$lib/components/Footer.svelte';

    import phoneQrcode from '$lib/assets/phone-qrcode.png';
    import qrcodeBlue from '$lib/assets/qrcode-azul.png';
    import copyLinkPagamento from '$lib/assets/copy-link-pagamento.png';
    import basspagoLogo from '$lib/assets/logo-basspago-preta.svg';
    import qrcodeImg from '$lib/assets/qrcode.png';

    let mounted = false;
    let visibleElements = {};
    let activeCase = 'fintech';

    const steps = [
        {
            icon: UserPlus,
            title: 'Crie sua conta',
            description: 'Cadastro digital rápido, sem burocracia.'
        },
        {
            icon: Settings,
            title: 'Configure sua operação',
            description: 'Defina pagamentos, integrações e dados do negócio.'
        },
       {
          icon: Zap,
          title: 'Comece a desenvolver',
          description: 'Integre APIs de pagamento e teste em ambiente sandbox.'
      },
      {
          icon: TrendingUp,
          title: 'Inicie seu negócio',
          description: 'Lance sua solução e monitore o crescimento com analytics.'
      }
    ];

    

    const faqs = [
        {
            question: 'É possível integrar o Pix ao meu sistema via API?',
            answer: 'Sim. Fornecemos APIs completas para envio e recebimento de Pix, geração de QR Codes, conciliação e notificações em tempo real.',
            open: false
        },
        {
            question: 'O que é o Pix Cobrança?',
            answer: 'Pix Cobrança é como um boleto com vencimento, juros e multa, mas com pagamento instantâneo. Ideal para empresas que trabalham com assinaturas, parcelamentos ou cobranças recorrentes.',
            open: false
        },
        {
            question: 'Como é feita a conciliação das transações?',
            answer: 'Oferecemos conciliação automática com webhooks em tempo real e dashboards com relatórios financeiros para exportação.',
            open: false
        },
        {
            question: 'Tenho acesso as minhas chaves Pix?',
            answer: 'Sim! Você pode criar novas chaves Pix, importar as existentes e gerenciá-las diretamente pela nossa plataforma, garantindo flexibilidade e controle total sobre suas transações.',
            open: false
        },
        {
            question: 'Posso oferecer Pix para meus clientes com minha marca?',
            answer: 'Sim. Nossa solução permite personalização completa, permitindo que sua empresa ofereça o Pix com identidade visual própria e experiência integrada.',
            open: false
        },
        {
            question: 'O que é o MED no Pix?',
            answer: 'O Mecanismo Especial de Devolução (MED) foi criado pelo Banco Central para ajudar vítimas de golpes com Pix, facilitando a devolução dos valores em situações previstas pelas regras.',
            open: false
        },
        {
            question: 'Como posso usar o Pix Automático?',
            answer: 'O Pix Automático permite a automação de pagamentos recorrentes mediante autorização do pagador. É ideal para SaaS, serviços financeiros, seguros, assinaturas e mensalidades.',
            open: false
        },
        {
            question: 'A Bass Pago é autorizada pelo Banco Central para operar com Pix?',
            answer: 'Sim, somos participantes indiretos do Pix autorizados pelo Banco Central. Isso nos permite oferecer soluções de pagamento seguras e reguladas, garantindo conformidade e eficiência para o seu negócio.',
            open: false
        }
    ];

    const codeString = `package main
import (
         "context"
         "basspago"
         "basspago/models/components"
)
func main ( ) {
     ctx = context.Background( )
     s = basspago.New( )
     res, err = s.PaymentLinks.CreatePaymentLink(ctx,
      components.Create
           PartnerAccount10: 
           "edf0e80e-d0f80df80-9d89fe89d8d9f"`.trim();

    let typewriterCode = '';
    let isTyping = false;

    onMount(() => {
        mounted = true;
        
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        visibleElements[entry.target.id] = true;
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            },
            { threshold: 0.1 }
        );

        const elements = document.querySelectorAll('.fade-up, [data-animate]');
        elements.forEach((el) => observer.observe(el));

        startTypewriter();

        return () => observer.disconnect();
    });

    function setActiveCase(caseName) {
        activeCase = caseName;
    }

    function toggleFaq(index) {
        faqs[index].open = !faqs[index].open;
    }

    async function startTypewriter() {
        if (isTyping) return;
        isTyping = true;
        
        while (true) {
            for (let i = 0; i <= codeString.length; i++) {
                typewriterCode = codeString.slice(0, i);
                await new Promise(r => setTimeout(r, 50));
            }
            
            await new Promise(r => setTimeout(r, 3000));
            
            typewriterCode = '';
            await new Promise(r => setTimeout(r, 500));
        }
    }
</script>

<svelte:head>
    <title>PIX - BassPago</title>
    <meta name="description" content="Pagamentos instantâneos com PIX. Tecnologia que garante velocidade, segurança e escala nos seus pagamentos." />
</svelte:head>

<Header />

<!-- PIX Instant Section -->
<section class="pix-instant">
    <div class="pix-instant__main">
        <div class="pix-instant__text fade-up">
            <h1>Pagamentos instantâneos<br>com Pix</h1>
            
            <div class="mobile">
                <div class="visual-bg">
                    <img src={phoneQrcode} alt="Pix QR code" class="phone-img" />
                    <div class="qr-overlay">
                        <div class="qr-bg">
                            <div class="qr-code">
                                <QrCode size={32} />
                            </div>
                        </div>
                        <div class="qr-footer">PIX COPIA E COLA</div>
                    </div>
                </div>
            </div>
            
            <p class="subtitle">Tecnologia que garante velocidade, segurança e escala nos seus pagamentos.</p>
            
            <a href="/precos#form-negociacao-basspago" class="link-cta">
                Abrir conta <ArrowRight size={16} class="icon" />
            </a>
        </div>
        
        <div class="pix-instant__visual fade-up">
            <div class="desktop">
                <div class="visual-bg">
                    <img src={phoneQrcode} alt="Pix QR code" class="phone-img" />
                    <div class="qr-overlay">
                        <div class="qr-bg">
                            <div class="qr-code">
                                <QrCode size={32} />
                            </div>
                        </div>
                        <div class="qr-footer">PIX COPIA E COLA</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="pix-instant__features">
        <div class="pix-feature fade-up">
            <div class="pix-feature__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
                    <path d="M9.9806 11.8739C9.9806 11.8739 9.39408 10.5706 7.30868 10.5706C5.15811 10.5706 3.7244 13.5683 6.65699 14.4155C9.9806 15.3279 10.4368 15.9144 10.1761 17.2178C9.78509 18.9122 5.22328 19.238 5.02777 16.8268" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M7.56836 20.5414V18.5863" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M7.56836 10.6358V9.3324" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M17.2189 11.8739C17.2189 11.8739 16.6324 10.5706 14.547 10.5706C12.3964 10.5706 10.9627 13.5683 13.8953 14.4155C17.2189 15.3279 17.6751 15.9144 17.4144 17.2178C17.0234 18.9122 12.4616 19.238 12.2661 16.8268" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M14.8066 20.5414V18.5863" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M14.8066 10.6358V9.3324" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M24.4572 11.8739C24.4572 11.8739 23.8706 10.5706 21.7852 10.5706C19.6347 10.5706 18.201 13.5683 21.1336 14.4155C24.4572 15.3279 24.9133 15.9144 24.6527 17.2178C24.2617 18.9122 19.6998 19.238 19.5043 16.8268" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M22.0469 20.5414V18.5863" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M22.0469 10.6358V9.3324" stroke="#0000FF" stroke-width="0.915563" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <h4>Alta escalabilidade</h4>
            <p>Escalabilidade e performance em pagamentos instantâneos</p>
        </div>
        
        <div class="pix-feature fade-up">
            <div class="pix-feature__icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7766 8.73801C20.1376 9.09901 20.4696 9.43101 20.7246 9.73201C20.9996 10.055 21.2706 10.438 21.4296 10.926C21.6566 11.6237 21.6566 12.3753 21.4296 13.073C21.2706 13.562 20.9996 13.945 20.7246 14.268C20.4696 14.568 20.1376 14.901 19.7766 15.262L15.2616 19.777C14.9425 20.1055 14.6109 20.4218 14.2676 20.725C13.9446 21 13.5606 21.271 13.0726 21.43C12.3749 21.6563 11.6234 21.6563 10.9256 21.43C10.4376 21.271 10.0556 21 9.73064 20.725C9.43064 20.47 9.09864 20.138 8.73764 19.777L4.22264 15.262C3.89411 14.9429 3.57788 14.6113 3.27464 14.268C2.99964 13.945 2.72864 13.562 2.56964 13.073C2.34267 12.3753 2.34267 11.6237 2.56964 10.926C2.72864 10.438 2.99964 10.056 3.27464 9.73201C3.52864 9.43201 3.86064 9.09901 4.22264 8.73801L8.73764 4.22301C9.09864 3.86201 9.43064 3.53001 9.73064 3.27501C10.0546 3.00001 10.4376 2.72901 10.9256 2.57001C11.6233 2.34304 12.375 2.34304 13.0726 2.57001C13.5616 2.72901 13.9446 3.00001 14.2676 3.27501C14.5676 3.53001 14.8996 3.86101 15.2616 4.22301L19.7766 8.73801ZM17.4336 8.50101L18.6866 9.75401C19.4736 10.54 19.8666 10.934 20.0136 11.387C20.1436 11.785 20.1436 12.215 20.0136 12.613C19.8666 13.067 19.4736 13.46 18.6866 14.246L17.4336 15.499H15.9206C15.8068 15.4976 15.6945 15.4719 15.5914 15.4236C15.4883 15.3753 15.3966 15.3055 15.3226 15.219L13.3766 13.079C13.2023 12.887 12.9897 12.7336 12.7526 12.6286C12.5155 12.5236 12.259 12.4694 11.9996 12.4694C11.7403 12.4694 11.4838 12.5236 11.2467 12.6286C11.0095 12.7336 10.797 12.887 10.6226 13.079L8.67564 15.219C8.60174 15.3054 8.51028 15.3751 8.40733 15.4234C8.30439 15.4717 8.19234 15.4974 8.07864 15.499H6.56464L5.31164 14.246C4.52564 13.46 4.13264 13.066 3.98564 12.613C3.8573 12.2144 3.8573 11.7856 3.98564 11.387C4.13264 10.933 4.52564 10.54 5.31164 9.75401L6.56464 8.50101H8.07964C8.28864 8.50101 8.50564 8.59101 8.67664 8.78101L10.6236 10.921C10.798 11.113 11.0105 11.2664 11.2477 11.3714C11.4848 11.4764 11.7413 11.5306 12.0006 11.5306C12.26 11.5306 12.5165 11.4764 12.7536 11.3714C12.9907 11.2664 13.2033 11.113 13.3776 10.921L15.3236 8.78101C15.3976 8.69447 15.4893 8.62472 15.5924 8.57643C15.6955 8.52815 15.8078 8.50243 15.9216 8.50101H17.4336ZM15.9446 7.01201H15.9206C15.2686 7.01201 14.6586 7.29801 14.2206 7.77901L12.2756 9.92001C12.2409 9.95855 12.1985 9.98937 12.1512 10.0105C12.1038 10.0316 12.0525 10.0425 12.0006 10.0425C11.9488 10.0425 11.8975 10.0316 11.8501 10.0105C11.8027 9.98937 11.7603 9.95855 11.7256 9.92001L9.77764 7.78001C9.56364 7.54036 9.3018 7.3482 9.009 7.21592C8.7162 7.08364 8.39893 7.01418 8.07764 7.01201H8.05364L9.75364 5.31201C10.5396 4.52601 10.9336 4.13301 11.3856 3.98601C11.7856 3.85601 12.2146 3.85601 12.6126 3.98601C13.0666 4.13301 13.4596 4.52601 14.2456 5.31301L15.9446 7.01201ZM15.9206 16.988H15.9446L14.2446 18.688C13.4596 19.474 13.0666 19.867 12.6126 20.014C12.2146 20.144 11.7846 20.144 11.3856 20.014C10.9326 19.867 10.5396 19.474 9.75364 18.687L8.05364 16.987H8.07864C8.73064 16.987 9.33964 16.702 9.77764 16.221L11.7246 14.08C11.7593 14.0415 11.8017 14.0106 11.8491 13.9895C11.8965 13.9684 11.9478 13.9575 11.9996 13.9575C12.0515 13.9575 12.1028 13.9684 12.1502 13.9895C12.1975 14.0106 12.2399 14.0415 12.2746 14.08L14.2216 16.22C14.4356 16.4597 14.6975 16.6518 14.9903 16.7841C15.2831 16.9164 15.6004 16.9858 15.9216 16.988" fill="#0000FF" />
                </svg>
            </div>
            <h4>Gestão de chaves</h4>
            <p>Controle total sobre a criação, cancelamento e portabilidade das chaves.</p>
        </div>
        
        <div class="pix-feature fade-up">
            <div class="pix-feature__icon" style="padding-left: 6px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                    <path d="M16.4219 15.5508V22.6484C16.4219 23.3047 15.8906 23.8359 15.2344 23.8359H3.09375C2.4375 23.8359 1.90625 23.3047 1.90625 22.6484V2.35156C1.90625 1.69531 2.4375 1.16406 3.09375 1.16406H15.2344C15.8906 1.16406 16.4219 1.69531 16.4219 2.35156V8.71875" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M1.90625 20.9961H16.4219" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M6.58496 1.16406H11.7451V1.97266C11.7451 2.6875 11.1631 3.26953 10.4482 3.26953H7.88184C7.16699 3.26953 6.58496 2.6875 6.58496 1.97266V1.16406Z" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.16406 16.3203C11.4768 16.3203 13.3516 14.4455 13.3516 12.1328C13.3516 9.82015 11.4768 7.94534 9.16406 7.94534C6.85137 7.94534 4.97656 9.82015 4.97656 12.1328C4.97656 14.4455 6.85137 16.3203 9.16406 16.3203Z" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M8.24219 13.0586C8.24219 13.5664 8.65625 13.9805 9.16406 13.9805C9.67187 13.9805 10.0859 13.5664 10.0859 13.0586C10.0859 12.5508 9.67187 12.1367 9.16406 12.1367C8.65625 12.1367 8.24219 11.7227 8.24219 11.2148C8.24219 10.707 8.65625 10.293 9.16406 10.293C9.67187 10.293 10.0859 10.707 10.0859 11.2148" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.16309 9.48834V10.2891" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.16309 13.9805V14.7812" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M23.0928 10.3516L18.6553 10.3516L18.6553 8.60162L14.46 12.1368L18.6553 15.668L18.6553 13.918L23.0928 13.918" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <h4>Cash-in</h4>
            <p>Dinheiro na sua conta, rápido e seguro.</p>
        </div>
        
        <div class="pix-feature fade-up">
            <div class="pix-feature__icon" style="padding-left: 6px;">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                    <path d="M16.4219 15.5508V22.6484C16.4219 23.3047 15.8906 23.8359 15.2344 23.8359H3.09375C2.4375 23.8359 1.90625 23.3047 1.90625 22.6484V2.35156C1.90625 1.69531 2.4375 1.16406 3.09375 1.16406H15.2344C15.8906 1.16406 16.4219 1.69531 16.4219 2.35156V8.71875" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M1.90625 20.9961H16.4219" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M6.58496 1.16406H11.7451V1.97266C11.7451 2.6875 11.1631 3.26953 10.4482 3.26953H7.88184C7.16699 3.26953 6.58496 2.6875 6.58496 1.97266V1.16406Z" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.16406 16.3203C11.4768 16.3203 13.3516 14.4455 13.3516 12.1328C13.3516 9.82015 11.4768 7.94534 9.16406 7.94534C6.85137 7.94534 4.97656 9.82015 4.97656 12.1328C4.97656 14.4455 6.85137 16.3203 9.16406 16.3203Z" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M8.24219 13.0586C8.24219 13.5664 8.65625 13.9805 9.16406 13.9805C9.67187 13.9805 10.0859 13.5664 10.0859 13.0586C10.0859 12.5508 9.67187 12.1367 9.16406 12.1367C8.65625 12.1367 8.24219 11.7227 8.24219 11.2148C8.24219 10.707 8.65625 10.293 9.16406 10.293C9.67187 10.293 10.0859 10.707 10.0859 11.2148" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.16309 9.48834V10.2891" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M9.16309 13.9805V14.7812" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M14.46 13.918H18.8975V15.668L23.0928 12.1329L18.8975 8.60162V10.3516H14.46" stroke="#0000FF" stroke-width="0.915563" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <h4>Cash-out</h4>
            <p>Saque instantâneo, com integração simples via API.</p>
        </div>
    </div>
</section>

<!-- PIX Automático Section -->
<section class="pix-automatico">
    <div class="pix-automatico__top">
        <div class="pix-automatico__qr-card fade-up desktop">
            <div class="pix-automatico__logo">
                <img src={basspagoLogo} alt="Basspago" />
            </div>
            <div class="pix-automatico__qr">
                <img src={qrcodeImg} alt="QR Code" />
            </div>
            <h3>Escanear para pagar</h3>
            <p class="desc">
                Use a câmera do seu celular para escanear o código QR acima e concluir este pagamento, ou baixe o código QR para usar depois.
            </p>
            <button class="download-btn">
                <Download size={16} /> Download
            </button>
        </div>
        
        <div class="pix-automatico__descricao fade-up">
            <h2>Pix automático</h2>
            <p>
                O Pix automático permite automatizar cobranças recorrentes com agilidade e segurança.
                Com a autorização prévia do cliente, os valores são debitados automaticamente via Pix
            </p>
        </div>
    </div>
    
    <div class="pix-automatico__bottom">
        <div class="pix-automatico__cards">
            <div class="pix-card fade-up">
                <div class="pix-card__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="27" viewBox="0 0 26 27" fill="none">
            <path
              d="M3.25391 11.5185C3.25391 10.8731 3.36147 10.2277 3.50489 9.61816C3.61246 9.15204 3.75588 8.72178 3.93515 8.29152C4.07857 7.93297 4.25785 7.61027 4.43712 7.28758C5.08252 6.10436 5.97889 5.13627 7.01869 4.34746C8.77559 3.05668 10.9627 2.37543 13.1858 2.51885C14.0463 2.55471 14.9068 2.73398 15.7315 3.05668C15.839 3.09253 15.9825 3.12839 16.09 3.2001C16.4844 3.37937 16.8788 3.55865 17.2732 3.77378"
              stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round"
              stroke-linejoin="round" />
            <path
              d="M22.9476 14.5C22.9476 15.2171 22.8401 15.9342 22.6608 16.6155C22.5532 17.0457 22.4098 17.476 22.2305 17.9062C21.4776 19.7348 20.2226 21.2049 18.6809 22.2088C16.2069 23.8223 13.0158 24.2167 10.0757 23.0335C9.7171 22.8901 9.3227 22.7108 9 22.4957"
              stroke="#0000FF" stroke-width="0.717102" stroke-miterlimit="10" stroke-linecap="round"
              stroke-linejoin="round" />
            <path d="M21.623 15.8266L22.9497 14.5L24.1329 15.8266" stroke="#0000FF" stroke-width="0.717102"
              stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4.50986 10.2635L3.18322 11.5543L2 10.2635" stroke="#0000FF" stroke-width="0.717102"
              stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
            <path
              d="M7 13.5H11M13 7.5V10.8333M19 13.5H15C14.0573 13.5 13.586 13.5 13.2933 13.7933C13 14.0853 13 14.5567 13 15.5M13 17.3467V19.192M15 15.5V16.5C15 17.464 15.5227 17.5 16.3333 17.5C16.5101 17.5 16.6797 17.5702 16.8047 17.6953C16.9298 17.8203 17 17.9899 17 18.1667M15.6667 19.5H15M17 15.5C17.9427 15.5 18.414 15.5 18.7067 15.7933C18.9993 16.0867 19 16.5587 19 17.5027C19 18.4467 19 18.9193 18.7067 19.2127C18.4933 19.426 18.1847 19.4847 17.6667 19.5M7 9.5C7 8.55733 7 8.086 7.29333 7.79333C7.58533 7.5 8.05667 7.5 9 7.5C9.94333 7.5 10.414 7.5 10.7067 7.79333C11 8.08533 11 8.55667 11 9.5C11 10.4433 11 10.914 10.7067 11.2067C10.4147 11.5 9.94333 11.5 9 11.5C8.05667 11.5 7.586 11.5 7.29333 11.2067C7 10.9147 7 10.4433 7 9.5ZM7 17.5C7 16.5573 7 16.086 7.29333 15.7933C7.58533 15.5 8.05667 15.5 9 15.5C9.94333 15.5 10.414 15.5 10.7067 15.7933C11 16.0853 11 16.5567 11 17.5C11 18.4433 11 18.914 10.7067 19.2067C10.4147 19.5 9.94333 19.5 9 19.5C8.05667 19.5 7.586 19.5 7.29333 19.2067C7 18.9147 7 18.4433 7 17.5ZM15 9.5C15 8.55733 15 8.086 15.2933 7.79333C15.5853 7.5 16.0567 7.5 17 7.5C17.9433 7.5 18.414 7.5 18.7067 7.79333C19 8.08533 19 8.55667 19 9.5C19 10.4433 19 10.914 18.7067 11.2067C18.4147 11.5 17.9433 11.5 17 11.5C16.0567 11.5 15.586 11.5 15.2933 11.2067C15 10.9147 15 10.4433 15 9.5Z"
              stroke="#0000FF" stroke-width="0.72" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
                </div>
                <div>
                    <h4>QR code dinâmicos</h4>
                    <p>Para cobranças imediatas e cobranças com data de vencimento</p>
                </div>
            </div>
            
            <div class="pix-card fade-up">
                <div class="pix-card__icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="27" viewBox="0 0 26 27" fill="none">
            <path
              d="M5 13.5H10.3333M13 5.5V9.94444M21 13.5H15.6667C14.4098 13.5 13.7813 13.5 13.3911 13.8911C13 14.2804 13 14.9089 13 16.1667M13 18.6289V21.0893M15.6667 16.1667V17.5C15.6667 18.7853 16.3636 18.8333 17.4444 18.8333C17.6802 18.8333 17.9063 18.927 18.073 19.0937C18.2397 19.2604 18.3333 19.4865 18.3333 19.7222M16.5556 21.5H15.6667M18.3333 16.1667C19.5902 16.1667 20.2187 16.1667 20.6089 16.5578C20.9991 16.9489 21 17.5782 21 18.8369C21 20.0956 21 20.7258 20.6089 21.1169C20.3244 21.4013 19.9129 21.4796 19.2222 21.5M5 8.16667C5 6.90978 5 6.28133 5.39111 5.89111C5.78044 5.5 6.40889 5.5 7.66667 5.5C8.92444 5.5 9.552 5.5 9.94222 5.89111C10.3333 6.28044 10.3333 6.90889 10.3333 8.16667C10.3333 9.42444 10.3333 10.052 9.94222 10.4422C9.55289 10.8333 8.92444 10.8333 7.66667 10.8333C6.40889 10.8333 5.78133 10.8333 5.39111 10.4422C5 10.0529 5 9.42444 5 8.16667ZM5 18.8333C5 17.5764 5 16.948 5.39111 16.5578C5.78044 16.1667 6.40889 16.1667 7.66667 16.1667C8.92444 16.1667 9.552 16.1667 9.94222 16.5578C10.3333 16.9471 10.3333 17.5756 10.3333 18.8333C10.3333 20.0911 10.3333 20.7187 9.94222 21.1089C9.55289 21.5 8.92444 21.5 7.66667 21.5C6.40889 21.5 5.78133 21.5 5.39111 21.1089C5 20.7196 5 20.0911 5 18.8333ZM15.6667 8.16667C15.6667 6.90978 15.6667 6.28133 16.0578 5.89111C16.4471 5.5 17.0756 5.5 18.3333 5.5C19.5911 5.5 20.2187 5.5 20.6089 5.89111C21 6.28044 21 6.90889 21 8.16667C21 9.42444 21 10.052 20.6089 10.4422C20.2196 10.8333 19.5911 10.8333 18.3333 10.8333C17.0756 10.8333 16.448 10.8333 16.0578 10.4422C15.6667 10.0529 15.6667 9.42444 15.6667 8.16667Z"
              stroke="#0000FF" stroke-width="0.72" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
                </div>
                <div>
                    <h4>QR code estático</h4>
                    <p>Para pagamentos que não expiram.</p>
                </div>
            </div>
        </div>
        
        <div class="pix-automatico__visual fade-up">
            <img src={qrcodeBlue} alt="qrcode" />
        </div>
    </div>
</section>

<!-- Payment Links Section -->
<section class="payment-links">
    <div class="payment-links__container">
        <div class="payment-links__text fade-up">
            <h2>Crie links de pagamentos</h2>
            <p>Envie ou incorpore o link de pagamento para seus clientes ou exiba um código QR para combinar pagamentos presenciais e on-line</p>
        </div>
        <div class="payment-links__image fade-up">
            <img src={copyLinkPagamento} alt="Link de pagamento e QR code" />
        </div>
    </div>
</section>

<!-- Como Funciona Section -->
<section id="como-funciona" class="como-funciona-section">
    <div class="container-basspago">
        <!-- Header -->
        <div
            class="text-center mb-20 max-w-3xl mx-auto"
            data-animate
            id="howitworks-header"
        >
            {#if mounted && visibleElements['howitworks-header']}
                
                <h2
                    class="text-4xl md:text-5xl font-black text-white mb-4"
                    in:fly={{ y: 24, duration: 500, delay: 100 }}
                >
                    Comece a receber em{' '}
                    <span class="text-gradient">poucos passos</span>
                </h2>

                <p
                    class="text-white/80 text-lg"
                    in:fly={{ y: 24, duration: 500, delay: 200 }}
                >
                    Estrutura simples, rápida e segura para sua empresa operar pagamentos.
                </p>
            {/if}
        </div>

        <!-- Steps -->
        <div class="relative grid md:grid-cols-4 gap-10 mb-20">
            {#each steps as step, index}
                <div
                    class="text-center step-item"
                    data-animate
                    id="step-{index}"
                >
                    {#if mounted && visibleElements[`step-${index}`]}
                        <div
                            in:fly={{ y: 30, duration: 400, delay: index * 80 }}
                            class="relative"
                        >
                            <!-- Step Icon -->
                            <div
                                class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-white/10 step-icon group-hover:bg-green-400/20 transition-colors duration-300"
                            >
                                <svelte:component this={step.icon} size={22} class="text-green-400" />
                            </div>

                            <!-- Step Number & Title -->
                            <h3 class="text-lg font-semibold text-white mb-1">
                                {index + 1}. {step.title}
                            </h3>

                            <!-- Step Description -->
                            <p class="text-sm text-white/70">
                                {step.description}
                            </p>

                            <!-- Connecting Line (não no último item) -->
                            {#if index < steps.length - 1}
                                <div
                                    class="hidden md:block absolute top-7 left-full w-full h-0.5 bg-gradient-to-r from-green-400/30 to-transparent -z-10"
                                    style="width: calc(100% - 1rem);"
                                />
                            {/if}
                        </div>
                    {/if}
                </div>
            {/each}
        </div>

        <!-- CTA -->
        <div
            class="text-center"
            data-animate
            id="howitworks-cta"
        >
            {#if mounted && visibleElements['howitworks-cta']}
                <div in:fly={{ y: 24, duration: 500 }}>
                    <a
                        href="/precos#form-negociacao-basspago"
                        class="cta-btn-white px-14 py-4 text-base inline-flex items-center gap-2 group"
                    >
                        Criar conta grátis
                        <ArrowRight size={18} class="group-hover:translate-x-1 transition-transform" />
                    </a>

                </div>
            {/if}
        </div>
    </div>
</section>

<Footer />

<style>
    /* PIX Instant Styles */
    .pix-instant {
        width: 100%;
        background: #fff;
        padding: 160px 20px 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(44px, 8vw, 60px);
    }

    .pix-instant__main {
        display: flex;
        align-items: end;
        justify-content: center;
        gap: clamp(32px, 7vw, 106px);
        max-width: 1240px;
        width: 100%;
        padding: 0 clamp(10px, 4vw, 38px);
    }

    .pix-instant__text {
        min-width: 270px;
        max-width: 380px;
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 3vw, 32px);
    }

    .pix-instant__text h1 {
        color: #111;
        margin: 0 0 10px 0;
        font-size: clamp(2rem, 4vw, 2.5rem);
        font-weight: 400;
    }

    .pix-instant__text .subtitle {
        color: #444;
        font-size: 1.1rem;
    }

    .cta-btn {
        background: #000;
        text-decoration: none;
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 400;
        padding: 11px 24px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: background .2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: 260px;
    }

    .cta-btn:hover {
        background: #0000ff;
    }

    .cta-btn-white {
        background: #fff;
        text-decoration: none;
        color: #000;
        border: none;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 500;
        padding: 11px 24px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: all .2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .cta-btn-white:hover {
        background: #41FE95;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
    }

    .pix-instant__visual {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 270px;
    }

    .visual-bg {
        background: radial-gradient(ellipse 89.27% 85.28% at -68.72% -3.69%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
                    radial-gradient(ellipse 153.44% 147.13% at 191.81% 148.20%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
                    rgba(0, 0, 255, 0.01);
        border-radius: clamp(22px, 4vw, 48px);
        width: clamp(320px, 32vw, 540px);
        min-width: 220px;
        height: 370px;
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: end;
    }

    .phone-img {
        max-width: 355px;
        width: 84%;
        display: block;
        border-radius: clamp(10px, 2vw, 34px);
        box-shadow: 0 6px 36px #0001;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

   .qr-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132px;
    height: 160px;
    transform: translate(-50%, -50%); /* Mudança aqui: de -54% para -50% */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Adicione esta linha */
    pointer-events: none;
}

    .qr-bg {
    width: 94px;
    height: 94px;
    background: #f4d47a;
    border-radius: 12px;
    margin-bottom: 10px;
    opacity: .88;
    position: relative;
}

.qr-code {
    width: 84px;
    height: 84px;
    background: #fff;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    box-shadow: 0 3px 14px #0001;
}

.qr-footer {
    margin-top: 0; 
    background: #ececec;
    border-radius: 17px;
    font-size: 0.7em;
    color: #222;
    padding: 3px 18px;
    font-weight: 400;
    letter-spacing: .04em;
    box-shadow: 0 1px 6px #0001;
}

    .pix-instant__features {
        max-width: 1240px;
        width: 100%;
        display: flex;
        gap: clamp(14px, 3vw, 24px);
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0 clamp(10px, 4vw, 38px);
        margin-top: clamp(22px, 5vw, 44px);
    }

    .pix-feature {
        background: rgba(0, 0, 255, 0.03);
        border-radius: clamp(10px, 2vw, 16px);
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: clamp(18px, 2vw, 28px) clamp(16px, 2vw, 22px);
        min-width: 220px;
        max-width: 270px;
        flex: 1;
        box-sizing: border-box;
        flex-direction: column;
    }

    .pix-feature__icon {
        background: rgba(0, 0, 255, 0.10);
        border-radius: 64px;
        min-width: 36px;
        min-height: 36px;
        max-width: 36px;
        max-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        font-size: 1.37em;
        color: #0000ff;
    }

    .pix-feature h4 {
        font-size: clamp(1.01rem, 1.3vw, 1.17rem);
        font-weight: 500;
        color: #111;
        margin: 0;
    }

    .pix-feature p {
        margin: 0;
        font-size: clamp(.93rem, 1vw, 1.04rem);
        color: #444;
        font-weight: 400;
    }

    /* PIX Automático Styles */
    .pix-automatico {
        width: 100%;
        background: #fff;
        padding: clamp(34px, 7vw, 90px) 0 clamp(24px, 5vw, 70px) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .pix-automatico__top {
        display: flex;
        gap: clamp(30px, 8vw, 90px);
        max-width: 1240px;
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .pix-automatico__qr-card {
    background: radial-gradient(ellipse 90.37% 83.90% at -68.72% -3.69%, #41FE95 19%, rgba(65, 254, 149, 0) 100%),
                radial-gradient(ellipse 165.85% 175.69% at 232.12% 75.65%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
                rgba(0, 0, 255, 0.01);
    border-radius: clamp(18px, 5vw, 44px);
    min-width: 290px;
    max-width: 520px;
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

.pix-automatico__logo {
    margin-bottom: 4px;
    align-self: center;
}

.pix-automatico__logo img {
    height: 32px;
    display: block;
}

.pix-automatico__qr {
    width: 100%; 
    max-width: none; 
    height: 170px;
    background: #eee;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    align-self: stretch;
}

.pix-automatico__qr img {
    width: 170px; 
    height: 170px; 
    object-fit: contain;
}

.pix-automatico__qr-card h3 {
    font-size: 1.24rem;
    font-weight: 600;
    color: #222;
    margin: 0;
    text-align: center;
    width: 100%;
}

.pix-automatico__qr-card .desc {
    color: rgba(51, 51, 51, 0.7);
    font-size: 1rem;
    text-align: center;
    margin: 0;
    width: 100%;
}

.download-btn {
    width: 100%;
    max-width: 100%;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: .95rem;
    padding: 12px 0;
    margin: 8px 0 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background .2s;
}

.download-btn:hover {
    background: #333;
}

    .pix-automatico__descricao {
        max-width: 440px;
        margin-left: 0;
    }

    .pix-automatico__descricao h2 {
        margin: 0 0 18px 0;
        color: #111;
        font-size: clamp(2rem, 4vw, 2.5rem);
        font-weight: 400;
    }

    .pix-automatico__descricao p {
        color: #444;
        margin: 0;
        font-size: 1.1rem;
    }

     .pix-automatico__bottom {
    width: 100%;
    max-width: 960px;
    display: flex;
    gap: clamp(28px, 6vw, 70px);
    margin-top: clamp(40px, 8vw, 80px);
    align-items: unset;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
  }

    .pix-automatico__cards {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 260px;
    max-width: 480px;
    flex: 2;
  }

    .pix-card {
        background: rgba(0, 0, 255, 0.03);
        border-radius: 15px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 25px;
        min-width: 180px;
    }

     .pix-card__icon {
    background: rgba(0, 0, 255, 0.10);
    border-radius: 64px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.37em;
    color: var(--pix-blue);
    margin-right: 2px;
  }

    .pix-card h4 {
        font-weight: 500;
        color: #111;
        margin: 0 0 10px 0;
    }

    .pix-card p {
        color: #444;
        margin: 0;
    }

    .pix-automatico__visual {
        min-width: 270px;
        max-width: 380px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pix-visual-bg {
        background: linear-gradient(39deg, #41FE95 0%, #0000FF 100%);
        border-radius: clamp(22px, 4vw, 44px);
        width: clamp(208px, 25vw, 340px);
        min-height: clamp(220px, 28vw, 360px);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        padding: 24px 0;
    }

    .pix-visual-qr {
        width: clamp(104px, 12vw, 180px);
        height: clamp(104px, 12vw, 180px);
        background: #fff;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #222;
        margin: 0 0 18px 0;
    }

    .pix-visual-footer {
        background: rgba(255, 255, 255, 0.9);
        color: #222;
        border-radius: 36px;
        padding: 5px 24px;
        font-size: .95em;
        box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1);
        letter-spacing: .02em;
    }

    /* Payment Links Styles */
    .payment-links {
        padding: 60px 20px;
        background: #000;
    }

    .payment-links__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1150px;
        margin: 0 auto;
        gap: 160px;
    }

    .payment-links__text {
        flex: 1;
    }

    .payment-links__text h2 {
        margin-bottom: 20px;
        font-weight: 400;
        color: white;
        font-size: clamp(2rem, 4vw, 2.5rem);
    }

    .payment-links__text p {
        font-weight: 200;
        color: rgba(255, 255, 255, 0.75);
        font-size: 1.1rem;
    }

    .payment-links__image img {
        max-width: 100%;
        height: auto;
    }

    /* Como Funciona Section */
    .como-funciona-section {
        padding: 80px 20px;
        background: #000;
        color: white;
    }

    .container-basspago {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    /* Animações para os passos */
    .step-item {
        position: relative;
    }

    .step-item:hover .step-icon {
        transform: scale(1.1);
        background-color: rgba(65, 254, 149, 0.2);
    }

    .step-icon {
        transition: all 0.3s ease;
    }

    /* Linha conectora animada */
    .step-item::after {
        content: '';
        position: absolute;
        top: 1.75rem;
        left: calc(100% - 0.5rem);
        width: calc(100% - 2rem);
        height: 2px;
        background: linear-gradient(90deg, rgba(65, 254, 149, 0.3), transparent);
        opacity: 0;
        animation: lineGrow 0.8s ease-in-out forwards;
        animation-delay: 0.5s;
    }

    /* Não mostrar linha no último item */
    .step-item:last-child::after {
        display: none;
    }

    /* Esconder linha em mobile */
    @media (max-width: 768px) {
        .step-item::after {
            display: none;
        }
    }

    @keyframes lineGrow {
        from {
            opacity: 0;
            transform: scaleX(0);
        }
        to {
            opacity: 1;
            transform: scaleX(1);
        }
    }

    /* Hover effect para o botão CTA */
    .group:hover .group-hover\:translate-x-1 {
        transform: translateX(0.25rem);
    }

    /* Animação de pulso para os ícones */
    .step-icon:hover {
        animation: iconPulse 0.6s ease-in-out;
    }

    @keyframes iconPulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.15);
        }
    }

    /* Gradient para o texto */
    .text-gradient {
        background: linear-gradient(135deg, #41FE95, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Use Case Styles */
    .use-case-section {
        padding: 80px 20px;
        background: #fff;
    }

    .use-case-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .use-case-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .use-case-header h2 {
        font-size: clamp(2rem, 4vw, 2.5rem);
        font-weight: 400;
        color: #111;
        margin-bottom: 40px;
    }

    .use-case-tabs {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .tab-button {
        padding: 10px 20px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
    }

    .tab-button:hover,
    .tab-button.active {
        background: #0000ff;
        color: white;
        border-color: #0000ff;
    }

    .use-case-content {
        display: flex;
        gap: 60px;
        align-items: center;
    }

    .use-case-image {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .placeholder-image {
        width: 200px;
        height: 200px;
        background: #f5f5f5;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
    }

    .use-case-text-block {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .use-case-text h2 {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 400;
        color: #111;
        margin-bottom: 16px;
    }

    .use-case-text p {
        color: #444;
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .case-link {
        font-size: 2rem;
        color: #0000ff;
        text-decoration: none;
    }

    /* API Section Styles */
    .pix-api-section {
        padding: 60px 20px;
        background: #000;
        color: #fff;
    }

    .pix-api__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        gap: 230px;
    }

    .pix-api__text h2 {
        margin-bottom: 30px;
        font-weight: 400;
        color: white;
        font-size: clamp(2rem, 4vw, 2.5rem);
    }

    .typewriter-block {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        padding: 20px;
        position: relative;
        width: 100%;
        overflow-x: hidden;
        border: 2px rgba(255, 255, 255, 0.06) solid;
        min-height: 300px;
        font-size: 13px;
        line-height: 1.6;
        flex: 1;
    }

    .typewriter-lines {
        position: absolute;
        left: 0;
        top: 20px;
        width: 45px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: #aaa;
        user-select: none;
        font-size: 13px;
        line-height: 1.6;
        pointer-events: none;
        font-weight: normal;
    }

    .typewriter-lines span {
        height: 21px;
        line-height: 1.6;
        display: block;
        padding-right: 10px;
    }

    .language-go {
        background: transparent !important;
        color: #ffffff;
        font-size: 13px;
        line-height: 1.6;
        margin-left: 45px;
    }

    /* FAQ Styles */
    .faq-section {
        padding: 80px 20px;
        background: #f9f9f9;
    }

    .faq-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .faq-container h2 {
        text-align: center;
        font-size: clamp(2rem, 4vw, 2.5rem);
        font-weight: 400;
        color: #111;
        margin-bottom: 60px;
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .faq-item {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .faq-question {
        width: 100%;
        padding: 24px;
        background: none;
        border: none;
        text-align: left;
        font-size: 1.1rem;
        font-weight: 500;
        color: #111;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background 0.2s;
    }

    .faq-question:hover {
        background: #f8f9fa;
    }

    .faq-icon {
        transition: transform 0.2s;
        flex-shrink: 0;
        margin-left: 16px;
    }

    .faq-icon.rotate-180 {
        transform: rotate(180deg);
    }

    .faq-answer {
        padding: 0 24px 24px;
        color: #666;
        line-height: 1.6;
    }

    .faq-answer p {
        margin: 0;
    }

    /* Utility Classes */
    .fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease;
    }

    .desktop {
        display: block;
    }

    .mobile {
        display: none;
    }

    /* Responsive Styles */
    @media (max-width: 900px) {
        .pix-instant__main {
            flex-direction: column;
            align-items: flex-start;
            gap: 48px;
        }

        .pix-instant__visual {
            width: 100%;
            margin: 0 auto;
            justify-content: center;
        }

        .pix-instant__features {
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .pix-feature {
            max-width: 100vw;
            min-width: 0;
        }

        .pix-automatico__top,
        .pix-automatico__bottom {
            flex-direction: column-reverse;
            align-items: stretch;
            gap: 38px;
            padding: 0 6vw;
        }

        .pix-automatico__visual,
        .pix-automatico__qr-card {
            margin: 0 auto;
        }

        .payment-links__container {
            flex-direction: column;
            gap: 40px;
        }

        .pix-api__container {
            flex-direction: column;
            gap: 40px;
        }

        .use-case-content {
            flex-direction: column;
            gap: 40px;
        }

        .use-case-tabs {
            gap: 8px;
        }

        .tab-button {
            padding: 8px 16px;
            font-size: 0.8rem;
        }
    }

    @media (max-width: 768px) {
        .desktop {
            display: none;
        }

        .mobile {
            display: block;
        }
    }

    @media (max-width: 600px) {
        .pix-instant {
            gap: 34px;
            padding: 120px 20px 0;
        }

        .pix-instant__main {
            gap: 60px;
            padding: 0 8px;
        }

        .pix-instant__features {
            flex-direction: column;
            padding: 0 4px;
        }

        .pix-feature {
            border-radius: 12px;
            padding: 20px;
            max-width: 98vw;
        }

        .pix-automatico__qr-card {
            display: none;
        }

        .pix-automatico {
            gap: 48px;
            padding: 60px 20px;
        }

        .pix-automatico__top,
        .pix-automatico__bottom {
            gap: 60px;
            padding: 0 2vw;
        }

        .pix-card {
            padding: 25px;
        }

        .pix-visual-bg {
            padding: 12px 0;
        }

        .use-case-tabs {
            flex-direction: column;
            align-items: center;
        }

        .tab-button {
            width: 200px;
        }
    }
</style>
                