/* =========================================
   HERO SECTION (Bloco Principal)
   ========================================= */
   .hero { display: flex; align-items: center; justify-content: space-between; padding: 80px 5%; background: #fff; min-height: 70vh; }
   .hero-content { max-width: 600px; }
   .hero-badge { display: inline-block; padding: 6px 12px; background: #e9ecef; color: #495057; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 20px; }
   .hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px; }
   .hero-accent { color: var(--primary); }
   .hero-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 30px; }
   .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
   
   .hero-visual { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
   .globe-canvas { display: block; cursor: grab; }
   
   /* =========================================
      ESTATÍSTICAS (Stats)
      ========================================= */
   .stats-section { padding: 60px 0; background: var(--bg-color); }
   .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: center; }
   .stat-card { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid var(--border-color); }
   .stat-card--highlight { background: var(--primary); color: #fff; border: none; }
   .stat-card--highlight .stat-label { color: rgba(255,255,255,0.8); }
   .stat-number { font-size: 2.8rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 10px; }
   .stat-card--highlight .stat-number { color: #fff; }
   .stat-label { font-weight: 500; color: var(--text-muted); }
   
   /* =========================================
      COMO FUNCIONA (How it works)
      ========================================= */
   .how-section { padding: 80px 0; background: #fff; }
   .section-header { text-align: center; margin-bottom: 50px; }
   .section-header h2 { font-size: 2.2rem; margin-bottom: 10px; }
   .section-header p { color: var(--text-muted); font-size: 1.1rem; }
   
   .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
   .step-card { padding: 30px; border-radius: 12px; background: var(--bg-color); text-align: left; position: relative; }
   .step-number { font-size: 4rem; font-weight: 800; color: rgba(0,86,179,0.05); position: absolute; top: 10px; right: 20px; line-height: 1; }
   .step-icon { width: 60px; height: 60px; background: #fff; color: var(--primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
   .step-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
   .step-card p { color: var(--text-muted); }
   
   /* =========================================
      CALL TO ACTION (CTA Bottom)
      ========================================= */
   .cta-section { padding: 80px 0; background: var(--bg-color); }
   .cta-card { background: var(--primary); color: #fff; padding: 60px 40px; border-radius: 20px; text-align: center; max-width: 800px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,86,179,0.2); }
   .cta-card h2 { font-size: 2.2rem; margin-bottom: 15px; }
   .cta-card p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 30px; }
   .cta-card .btn { background: #fff; color: var(--primary); padding: 15px 30px; font-size: 1.1rem; }
   .cta-card .btn:hover { background: #f8f9fa; transform: translateY(-2px); }
   
   /* =========================================
      RESPONSIVIDADE (Mobile)
      ========================================= */
   @media (max-width: 768px) {
       .hero { flex-direction: column; text-align: center; padding: 40px 5%; min-height: auto; }
       .hero-content { max-width: 100%; }
       .hero-title { font-size: 2.5rem; }
       .hero-visual { margin-top: 30px; }
       .globe-canvas { width: 280px !important; height: 280px !important; }
       .hero-actions { flex-direction: column; justify-content: center; }
       .hero-actions .btn { width: 100%; justify-content: center; }
       .stats-grid { grid-template-columns: 1fr 1fr; }
       .section-header h2 { font-size: 1.8rem; }
       .cta-card { padding: 40px 24px; }
       .cta-card h2 { font-size: 1.8rem; }
       .steps-grid { grid-template-columns: 1fr; }
   }
   @media (max-width: 480px) {
       .hero-title { font-size: 2rem; letter-spacing: -0.5px; }
       .hero-subtitle { font-size: 1rem; }
       .globe-canvas { width: 240px !important; height: 240px !important; }
       .stats-grid { grid-template-columns: 1fr; }
       .cta-card { padding: 32px 16px; }
       .cta-card h2 { font-size: 1.5rem; }
       .cta-card p { font-size: 1rem; }
       .how-section, .cta-section { padding: 50px 0; }
   }