* { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --primary-green: #00EBA4;
            --primary-blue: #2C92FB;
            --text-dark: #212121;
            --text-gray: #666666;
            --bg-light: #F8F9FA;
            --bg-white: #FFFFFF;
            --border-light: #E8E8E8;
            --shadow: rgba(0, 0, 0, 0.08);
        }

        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--text-dark); background: var(--bg-white); }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
        .text-center { text-align: center; }
        .mt-3 { margin-top: 3rem; }

        /* Header (opcional) */
        .page-header { background: rgba(255,255,255,0.95); padding: 1.5rem 0; border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); }
        .header-content { display: flex; align-items: center; justify-content: center; gap: 2rem; }
        .header-logos { display: flex; align-items: center; gap: 1.5rem; }
        .header-logo { height: 32px; width: auto; }
        .logo-divider { width: 1px; height: 32px; background: var(--border-light); }
        @media (max-width: 640px){ .header-logos{flex-direction:column;gap:.75rem}.logo-divider{display:none} }

        /* Hero */
        .hero { background: linear-gradient(135deg, var(--bg-white) 0%, #F5FAFF 100%); padding: 4rem 0 4rem; position: relative; overflow: hidden; }
        .hero::before { content:''; position:absolute; top:-50%; right:-20%; width:60%; height:200%; background: radial-gradient(circle, rgba(44,146,251,.03) 0%, transparent 70%); pointer-events:none; }
        .hero-content { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; position:relative; z-index:1; }
        @media (min-width:1024px){ .hero-content{ grid-template-columns:1fr 1fr } }
        .hero-badge{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(44,146,251,.1); color:var(--primary-blue); padding:.5rem 1rem; border-radius:50px; font-size:.875rem; font-weight:600; margin-bottom:1.5rem; border:1px solid rgba(44,146,251,.2) }
        .pulse-dot{ width:8px; height:8px; background:var(--primary-blue); border-radius:50%; animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite }
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
        .hero h1{ font-size:2.5rem; line-height:1.2; margin-bottom:1.5rem; font-weight:700; color:var(--text-dark) }
        @media (min-width:768px){ .hero h1{ font-size:3rem } }
        .hero p{ font-size:1.125rem; color:var(--text-gray); margin-bottom:2rem; max-width:600px }
        .hero strong{ color:var(--primary-blue); font-weight:600 }
        .cta-buttons{ flex-direction:column; gap:1rem; margin-top:2rem }
        @media (min-width:640px){ .cta-buttons{ flex-direction:row } }
        .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:1rem 2rem; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; border:none; transition:all .3s ease; text-decoration:none }
        .btn-primary{ background:var(--primary-green); color:var(--bg-white) }
        .btn-primary:hover{ background:#00d493; transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,235,164,.25) }
        .btn-secondary{ background:transparent; color:var(--text-dark); border:2px solid var(--border-light) }
        .btn-secondary:hover{ background:var(--bg-light); border-color:var(--primary-blue) }
        .benefits .btn-secondary, .final-cta .btn-secondary{ background:rgba(255,255,255,.1); color:var(--bg-white); border-color:rgba(255,255,255,.4) }
        .benefits .btn-secondary:hover, .final-cta .btn-secondary:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.6) }
        .hero-image{ position:relative; border-radius:12px; overflow:hidden; box-shadow:0 20px 40px var(--shadow); border:1px solid var(--border-light) }
        .hero-image img{ width:100%; height:auto; display:block }
        .checkout-overlay{ position:absolute; bottom:1rem; left:1rem; right:1rem; background:white; padding:1rem; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.15); display:flex; justify-content:space-between; align-items:center }
        .floa-logo{ height:24px; width:auto }
        .checkout-badge{ background:rgba(44,146,251,.1); color:var(--primary-blue); padding:.25rem .75rem; border-radius:50px; font-size:.875rem; font-weight:600; border:1px solid rgba(44,146,251,.2) }

        section{ padding:5rem 0 }
        .section-title{ text-align:center; font-size:2rem; color:var(--text-dark); margin-bottom:1rem; font-weight:700 }
        @media (min-width:768px){ .section-title{ font-size:2.5rem } }
        .section-subtitle{ text-align:center; font-size:1.125rem; color:var(--text-gray); margin-bottom:3rem }

        /* What is FLOA */
        .what-is-floa{ background:var(--bg-white) }
        .text-content{ max-width:800px; margin:0 auto; text-align:center }
        .text-content p{ margin-bottom:1rem; font-size:1.125rem; color:var(--text-gray); line-height:1.8 }
        .feature-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem }
        @media (min-width:768px){ .feature-grid{ grid-template-columns:repeat(3,1fr) } }
        .feature-card{ background:var(--bg-white); padding:2rem; border-radius:12px; text-align:center; border:1px solid var(--border-light); transition:all .3s ease }
        .feature-card:hover{ box-shadow:0 8px 24px var(--shadow); transform:translateY(-4px) }
        .feature-icon{ width:3.5rem; height:3.5rem; background:rgba(44,146,251,.1); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem }
        .feature-icon svg{ width:1.75rem; height:1.75rem; stroke:var(--primary-blue); fill:none; stroke-width:2 }
        .feature-card h3{ font-size:1.125rem; color:var(--text-dark); margin-bottom:.5rem; font-weight:600 }
        .feature-card p{ font-size:.9375rem; color:var(--text-gray) }

        /* Benefits */
        .benefits{ background:#009fff; padding:5rem 0 }
        .benefits .section-title{ color:var(--bg-white) }
        .benefits .section-subtitle{ color:rgba(255,255,255,.95) }
        .benefits .section-subtitle strong{ color:var(--bg-white) }
        .benefits-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:1000px; margin:0 auto }
        @media (min-width:768px){ .benefits-grid{ grid-template-columns:repeat(2,1fr) } }
        @media (min-width:1024px){ .benefits-grid{ grid-template-columns:repeat(3,1fr) } }
        .benefit-card{ background:var(--bg-white); padding:1.5rem; border-radius:12px; border:1px solid rgba(255,255,255,.2); transition:all .3s ease; box-shadow:0 4px 16px rgba(0,0,0,.1) }
        .benefit-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.15); transform:translateY(-4px); border-color:rgba(255,255,255,.4) }
        .benefit-icon{ width:3rem; height:3rem; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; background:rgba(44,146,251,.1) }
        .benefit-icon svg{ width:1.5rem; height:1.5rem; stroke:var(--primary-blue); fill:none; stroke-width:2 }
        .benefit-card h3{ font-size:1.125rem; color:var(--text-dark); margin-bottom:.5rem; font-weight:600 }
        .benefit-card p{ color:var(--text-gray); font-size:.9375rem; line-height:1.6 }

        /* How it Works */
        .how-it-works{ background:var(--bg-white) }
        .workflow{ max-width:800px; margin:0 auto; position:relative }
        .workflow-step{ display:flex; gap:1.5rem; margin-bottom:2rem; align-items:flex-start }
        .step-number{ position:relative; flex-shrink:0 }
        .step-circle{ width:4rem; height:4rem; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(135deg,var(--primary-blue),#1e7ce8) }
        .step-circle.green{ background:linear-gradient(135deg,var(--primary-green),#00d493) }
        .step-circle svg{ width:2rem; height:2rem; stroke:#fff; fill:none; stroke-width:2 }
        .step-badge{ position:absolute; top:-6px; right:-6px; width:1.5rem; height:1.5rem; background:#fff; border-radius:50%; border:2px solid var(--border-light); display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--text-dark); font-weight:700 }
        .step-content{ flex:1; background:var(--bg-light); padding:1.5rem; border-radius:12px; border:1px solid var(--border-light) }
        .step-content p{ font-size:1.0625rem; color:var(--text-dark); margin:0 }
        .info-box{ background:rgba(44,146,251,.05); border-left:4px solid var(--primary-blue); padding:1.5rem; border-radius:0 8px 8px 0; margin-top:3rem; max-width:800px; margin-left:auto; margin-right:auto }
        .info-box p{ color:var(--text-dark); margin:0 }

        /* Integration */
        .integration{ background:var(--bg-light) }
        .integration-list{ max-width:800px; margin:0 auto }
        .integration-item{ background:var(--bg-white); padding:1.5rem; border-radius:12px; border:1px solid var(--border-light); margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; transition:all .3s ease }
        .integration-item:hover{ box-shadow:0 8px 24px var(--shadow); border-color:var(--primary-blue) }
        .integration-name{ display:flex; align-items:center; gap:1rem }
        .integration-icon{ width:3rem; height:3rem; background:rgba(44,146,251,.1); border-radius:8px; display:flex; align-items:center; justify-content:center }
        .integration-icon svg{ width:1.5rem; height:1.5rem; stroke:var(--primary-blue); fill:none; stroke-width:2 }
        .integration-name h3{ margin:0; font-size:1.125rem; color:var(--text-dark); font-weight:600 }
        .integration-status{ padding:.5rem 1rem; border-radius:50px; font-size:.875rem; font-weight:600 }
        .status-available{ background:rgba(0,235,164,.1); color:var(--primary-green); border:1px solid rgba(0,235,164,.2) }
        .status-coming{ background:rgba(44,146,251,.1); color:var(--primary-blue); border:1px solid rgba(44,146,251,.2) }
        .status-soon{ background:rgba(102,102,102,.1); color:var(--text-gray); border:1px solid var(--border-light) }

        /* Target Audience */
        .target-audience{ background:var(--bg-white) }
        .audience-grid{ display:grid; grid-template-columns:1fr; gap:2rem; max-width:900px; margin:0 auto }
        @media (min-width:768px){ .audience-grid{ grid-template-columns:repeat(3,1fr) } }
        .audience-card{ text-align:center; padding:2rem 1rem; border-radius:12px; transition:all .3s ease }
        .audience-card:hover{ background:var(--bg-light) }
        .audience-icon{ width:4rem; height:4rem; margin:0 auto 1rem; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(44,146,251,.1) }
        .audience-icon svg{ width:2rem; height:2rem; stroke:var(--primary-blue); fill:none; stroke-width:2 }
        .audience-card h3{ font-size:1.125rem; color:var(--text-dark); margin-bottom:.5rem; font-weight:600 }
        .audience-card p{ color:var(--text-gray); font-size:.9375rem; line-height:1.6 }

        /* Trust */
        .trust{ background:#009fff; padding:5rem 0 }
        .trust .section-title{ color:var(--bg-white) }
        .trust-grid{ display:grid; grid-template-columns:1fr; gap:2rem; max-width:1000px; margin:0 auto 3rem }
        @media (min-width:768px){ .trust-grid{ grid-template-columns:repeat(2,1fr) } }
        .trust-card{ background:var(--bg-white); padding:2rem; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.1); border:1px solid rgba(255,255,255,.2) }
        .trust-header{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem }
        .trust-logo{ width:4rem; height:4rem; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(44,146,251,.1) }
        .trust-logo img{ max-width:100%; max-height:100%; padding:.5rem }
        .trust-header h3{ font-size:1.5rem; color:var(--text-dark); font-weight:700 }
        .trust-card p{ color:var(--text-gray); line-height:1.7 }
        .counter-box{ padding:1.5rem; border-radius:12px; text-align:center; margin:1rem 0; background:rgba(44,146,251,.05); border:1px solid rgba(44,146,251,.1) }
        .counter{ font-size:2.5rem; font-weight:700; color:var(--primary-blue) }
        .counter-label{ font-size:.9375rem; color:var(--text-gray); margin-top:.5rem }
        .trust-feature{ display:flex; align-items:center; gap:.75rem; margin-top:1rem }
        .trust-feature svg{ width:1.25rem; height:1.25rem; stroke:var(--primary-blue); fill:none; stroke-width:2; flex-shrink:0 }
        .trust-feature p{ margin:0; font-size:.9375rem }
        .trust-footer{ max-width:800px; margin:0 auto; background:var(--bg-white); padding:2rem; border-radius:12px; text-align:center; border:1px solid rgba(255,255,255,.2); box-shadow:0 4px 16px rgba(0,0,0,.1) }
        .trust-footer svg{ width:3rem; height:3rem; margin:0 auto 1rem; stroke:var(--primary-blue); fill:none; stroke-width:2 }
        .trust-footer p{ color:var(--text-dark); font-size:1.0625rem }

        /* FAQ */
        .faq-section{ padding:5rem 0; background:var(--bg-white) }
        .faq-container{ max-width:800px; margin:0 auto; margin-top:3rem }
        .faq-item{ background:var(--bg-light); border-radius:12px; margin-bottom:1rem; overflow:hidden; transition:all .3s ease; border:1px solid var(--border-light) }
        .faq-item:hover{ box-shadow:0 4px 12px rgba(0,0,0,.05) }
        .faq-item.active{ border-color:rgba(44,146,251,.3); box-shadow:0 6px 20px rgba(44,146,251,.1) }
        .faq-question{ width:100%; padding:1.5rem; background:none; border:none; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:1.125rem; font-weight:600; color:var(--text-dark); text-align:left; transition:all .3s ease }
        .faq-question:hover{ color:var(--primary-blue) }
        .faq-icon{ width:24px; height:24px; stroke:var(--text-gray); stroke-width:2; fill:none; transition:transform .3s ease; flex-shrink:0 }
        .faq-item.active .faq-icon{ transform:rotate(180deg); stroke:var(--primary-blue) }
        .faq-answer{ max-height:0; overflow:hidden; transition:all .3s ease }
        .faq-answer p{ padding:0 1.5rem 1.5rem 1.5rem; color:var(--text-gray); line-height:1.8 }
        .faq-item.active .faq-answer{ max-height:500px }

        /* Final CTA */
        .final-cta{ background:#009fff; position:relative; overflow:hidden; padding:5rem 0 }
        .final-cta::before{ content:''; position:absolute; top:-50%; left:-20%; width:60%; height:200%; background:radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%); pointer-events:none }
        .final-cta-content{ max-width:800px; margin:0 auto; text-align:center; position:relative; z-index:1 }
        .final-cta h2{ font-size:2rem; margin-bottom:1.5rem; font-weight:700; color:var(--bg-white) }
        @media (min-width:768px){ .final-cta h2{ font-size:2.5rem } }
        .final-cta p{ font-size:1.125rem; color:rgba(255,255,255,.95); margin-bottom:2rem; line-height:1.7 }
        .info-grid{ grid-template-columns:1fr; gap:1.5rem; margin-top:3rem; max-width:600px; margin-left:auto; margin-right:auto }
        @media (min-width:768px){ .info-grid{ grid-template-columns:repeat(2,1fr) } }
        .info-card{ background:var(--bg-white); padding:1.5rem; border-radius:12px; border:1px solid rgba(255,255,255,.2); box-shadow:0 4px 16px rgba(0,0,0,.1) }
        .info-card svg{ width:2rem; height:2rem; margin:0 auto .75rem; stroke:var(--primary-blue); fill:none; stroke-width:2 }
        .info-card p{ margin:0 }
        .info-card .small{ font-size:.875rem; color:var(--text-gray) }
        .info-card .large{ font-size:1.125rem; margin-top:.25rem; color:var(--text-dark); font-weight:600 }

        /* Sticky CTA */
        .sticky-cta{ position:fixed; bottom:0; left:0; right:0; background:var(--bg-white); box-shadow:0 -4px 12px var(--shadow); border-top:2px solid var(--primary-green); padding:1rem; z-index:1000; transform:translateY(100%); transition:transform .3s ease }
        .sticky-cta.visible{ transform:translateY(0) }
        .sticky-cta-content{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap }
        .sticky-cta p{ color:var(--text-dark); margin:0; flex:1; min-width:200px }
        .sticky-cta strong{ color:var(--primary-blue) }
        .sticky-cta-actions{ display:flex; align-items:center; gap:.75rem }
        .btn-small{ padding:.625rem 1.25rem; font-size:.9375rem }
        .close-btn{ background:transparent; border:none; color:var(--text-gray); cursor:pointer; padding:.5rem; display:flex; align-items:center; justify-content:center; transition:color .3s ease; border-radius:4px }
        .close-btn:hover{ color:var(--text-dark); background:var(--bg-light) }
        .close-btn svg{ width:1.25rem; height:1.25rem; stroke:currentColor; fill:none; stroke-width:2 }

        footer{ background:var(--text-dark); color:var(--text-gray); padding:2rem 0; text-align:center }
        footer p{ margin:.5rem 0 }
        .fade-in-up{ animation:fadeInUp .6s ease-out forwards }
        @keyframes fadeInUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

        /* ANCORAGEM SUAVE: evita corte por headers fixos */
        #ativar{ scroll-margin-top: 96px; }