/* ── Reset escoped ── */
#rc18-hero, #rc18-hero *, #rc18-hero *::before, #rc18-hero *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── Wrapper principal ── */
#rc18-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  background: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Canvas de partículas ── */
#rc18-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
}

/* ── Orbs animados ── */
#rc18-hero .orb {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: rc18-float linear infinite !important;
  will-change: transform !important;
}
#rc18-hero .orb-1 {
  width: 600px !important; height: 600px !important;
  background: radial-gradient(circle, rgba(128,186,165,0.45) 0%, rgba(128,186,165,0) 70%) !important;
  top: -150px !important; left: -100px !important;
  animation-duration: 18s !important;
  animation-name: rc18-float-1 !important;
}
#rc18-hero .orb-2 {
  width: 500px !important; height: 500px !important;
  background: radial-gradient(circle, rgba(239,137,67,0.25) 0%, rgba(239,137,67,0) 70%) !important;
  bottom: -100px !important; right: -80px !important;
  animation-duration: 22s !important;
  animation-name: rc18-float-2 !important;
}
#rc18-hero .orb-3 {
  width: 350px !important; height: 350px !important;
  background: radial-gradient(circle, rgba(0,117,74,0.18) 0%, rgba(0,117,74,0) 70%) !important;
  top: 40% !important; left: 35% !important;
  animation-duration: 28s !important;
  animation-name: rc18-float-3 !important;
}
#rc18-hero .orb-4 {
  width: 280px !important; height: 280px !important;
  background: radial-gradient(circle, rgba(239,137,67,0.18) 0%, rgba(239,137,67,0) 70%) !important;
  top: 10% !important; right: 30% !important;
  animation-duration: 24s !important;
  animation-name: rc18-float-1 !important;
  animation-delay: -8s !important;
}

@keyframes rc18-float-1 {
  0%   { transform: translate(0px, 0px) scale(1); }
  25%  { transform: translate(40px, 30px) scale(1.05); }
  50%  { transform: translate(20px, 60px) scale(0.97); }
  75%  { transform: translate(-20px, 30px) scale(1.03); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes rc18-float-2 {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(-50px, -30px) scale(1.08); }
  66%  { transform: translate(30px, -50px) scale(0.95); }
  100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes rc18-float-3 {
  0%   { transform: translate(0px, 0px) scale(1); }
  50%  { transform: translate(60px, 40px) scale(1.1); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* ── Grid split ── */
#rc18-hero .rc18-inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 80px 48px !important;
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 64px !important;
  align-items: center !important;
}

/* ── Coluna esquerda ── */
#rc18-hero .rc18-left { padding: 0 !important; }

#rc18-hero .rc18-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: #00754A !important;
  margin-bottom: 24px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(0,117,74,0.25) !important;
  border-radius: 999px !important;
  background: rgba(0,117,74,0.06) !important;
}
#rc18-hero .rc18-eyebrow span.dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #00754A !important;
  display: inline-block !important;
  animation: rc18-pulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}
@keyframes rc18-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

#rc18-hero .rc18-h1 {
  font-size: clamp(26px, 3.2vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #17392F !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
  letter-spacing: -0.02em !important;
}
#rc18-hero .rc18-h1 em {
  font-style: normal !important;
  color: #00754A !important;
  position: relative !important;
}
#rc18-hero .rc18-h1 em::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; bottom: -2px !important;
  width: 100% !important; height: 3px !important;
  background: linear-gradient(90deg, #EF8943, #00754A) !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  animation: rc18-underline 1.2s 0.6s ease forwards !important;
}
@keyframes rc18-underline {
  to { transform: scaleX(1); }
}

#rc18-hero .rc18-sub {
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #3a5247 !important;
  margin-bottom: 40px !important;
  padding: 0 !important;
  max-width: 560px !important;
}
#rc18-hero .rc18-sub strong {
  font-weight: 700 !important;
  color: #17392F !important;
}

/* Stats */
#rc18-hero .rc18-stats {
  display: flex !important;
  gap: 32px !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}
#rc18-hero .rc18-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
}
#rc18-hero .rc18-stat-num {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #17392F !important;
  line-height: 1 !important;
  padding: 0 !important;
}
#rc18-hero .rc18-stat-num span {
  color: #EF8943 !important;
}
#rc18-hero .rc18-stat-label {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #6a8a7e !important;
  line-height: 1.4 !important;
  max-width: 120px !important;
  padding: 0 !important;
}
#rc18-hero .rc18-stat-divider {
  width: 1px !important;
  background: rgba(0,117,74,0.2) !important;
  align-self: stretch !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* ── Card formulário ── */
#rc18-hero .rc18-form-card {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(0,117,74,0.15) !important;
  border-radius: 24px !important;
  padding: 36px 32px 32px !important;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.03),
    0 20px 60px rgba(23,57,47,0.10),
    inset 0 1px 0 rgba(255,255,255,0.8) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  transition: box-shadow 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
#rc18-hero .rc18-form-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #00754A, #EF8943, #80BAA5) !important;
  border-radius: 24px 24px 0 0 !important;
}
#rc18-hero .rc18-form-card:hover {
  box-shadow:
    0 4px 6px rgba(0,0,0,0.04),
    0 30px 80px rgba(23,57,47,0.15),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

#rc18-hero .rc18-form-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #17392F !important;
  line-height: 1.4 !important;
  padding: 0 !important;
}
#rc18-hero .rc18-form-sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5a7a6e !important;
  line-height: 1.6 !important;
  padding: 0 !important;
  margin-top: -10px !important;
}

/* iframe HubSpot */
#rc18-hero .rc18-hbspt-wrap {
  width: 100% !important;
  min-height: 320px !important;
  padding: 0 !important;
}
#rc18-hero .rc18-hbspt-wrap iframe {
  width: 100% !important;
  border: none !important;
  display: block !important;
}

/* Microcopy */
#rc18-hero .rc18-microcopy {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  background: rgba(0,117,74,0.06) !important;
  border: 1px solid rgba(0,117,74,0.15) !important;
  border-radius: 12px !important;
  margin-top: -4px !important;
}
#rc18-hero .rc18-microcopy svg {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}
#rc18-hero .rc18-microcopy p {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #3a5247 !important;
  line-height: 1.5 !important;
  padding: 0 !important;
}
#rc18-hero .rc18-microcopy p strong {
  font-weight: 700 !important;
  color: #00754A !important;
}

/* Trust badges */
#rc18-hero .rc18-trust {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin-top: -4px !important;
}
#rc18-hero .rc18-trust-badge {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #7a9a8e !important;
  padding: 0 !important;
}
#rc18-hero .rc18-trust-badge svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}
#rc18-hero .rc18-trust-sep {
  width: 3px !important; height: 3px !important;
  background: #c0d4cc !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Glow mouse */
#rc18-hero .rc18-mouse-glow {
  position: absolute !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(circle, rgba(239,137,67,0.12) 0%, rgba(239,137,67,0) 70%) !important;
  transform: translate(-50%, -50%) !important;
  transition: opacity 0.3s ease !important;
  opacity: 0 !important;
  filter: blur(10px) !important;
}

/* Responsivo */
@media (max-width: 960px) {
  #rc18-hero .rc18-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 60px 32px !important;
  }
  #rc18-hero .rc18-form-card { max-width: 520px !important; margin: 0 auto !important; width: 100% !important; }
}
@media (max-width: 600px) {
  #rc18-hero .rc18-inner { padding: 48px 20px !important; }
  #rc18-hero .rc18-stats  { gap: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #rc18-hero .orb { animation: none !important; }
  #rc18-hero .rc18-h1 em::after { animation: none !important; transform: scaleX(1) !important; }
}
(function(){
  var hero   = document.getElementById('rc18-hero');
  var canvas = document.getElementById('rc18-canvas');
  var glow   = document.getElementById('rc18Glow');
  if(!hero || !canvas) return;

  var ctx = canvas.getContext('2d');
  var W, H, particles, mouse = { x: -9999, y: -9999, active: false };

  /* ── Paleta ── */
  var COLORS = ['#00754A','#80BAA5','#EF8943','#33916e','#17392F'];
  var PARTICLE_COUNT  = 72;
  var CONNECT_DIST    = 160;   /* distância máxima para ligar dois nós */
  var MOUSE_DIST      = 200;   /* raio de atração do mouse */
  var SPEED           = 0.45;

  /* ── Resize ── */
  function resize(){
    var rect = hero.getBoundingClientRect();
    W = canvas.width  = rect.width;
    H = canvas.height = rect.height;
  }

  /* ── Criar partículas ── */
  function createParticles(){
    particles = [];
    for(var i = 0; i < PARTICLE_COUNT; i++){
      var color = COLORS[Math.floor(Math.random() * COLORS.length)];
      particles.push({
        x:  Math.random() * W,
        y:  Math.random() * H,
        vx: (Math.random() - 0.5) * SPEED,
        vy: (Math.random() - 0.5) * SPEED,
        r:  Math.random() * 2.5 + 1.2,
        color: color,
        alpha: Math.random() * 0.5 + 0.3
      });
    }
  }

  /* ── Loop de animação ── */
  function tick(){
    ctx.clearRect(0, 0, W, H);

    /* Mover partículas */
    for(var i = 0; i < particles.length; i++){
      var p = particles[i];

      /* Leve atração ao mouse */
      if(mouse.active){
        var dx = mouse.x - p.x;
        var dy = mouse.y - p.y;
        var d  = Math.sqrt(dx*dx + dy*dy);
        if(d < MOUSE_DIST && d > 0){
          var force = (MOUSE_DIST - d) / MOUSE_DIST * 0.018;
          p.vx += dx / d * force;
          p.vy += dy / d * force;
        }
      }

      /* Limitar velocidade */
      var spd = Math.sqrt(p.vx*p.vx + p.vy*p.vy);
      if(spd > SPEED * 2.5){ p.vx = p.vx/spd * SPEED*2.5; p.vy = p.vy/spd * SPEED*2.5; }

      p.x += p.vx;
      p.y += p.vy;

      /* Bounce nas bordas */
      if(p.x < 0){ p.x = 0; p.vx *= -1; }
      if(p.x > W){ p.x = W; p.vx *= -1; }
      if(p.y < 0){ p.y = 0; p.vy *= -1; }
      if(p.y > H){ p.y = H; p.vy *= -1; }
    }

    /* Desenhar conexões */
    for(var i = 0; i < particles.length; i++){
      for(var j = i+1; j < particles.length; j++){
        var a = particles[i], b = particles[j];
        var dx = a.x - b.x, dy = a.y - b.y;
        var dist = Math.sqrt(dx*dx + dy*dy);
        if(dist < CONNECT_DIST){
          var opacity = (1 - dist/CONNECT_DIST) * 0.22;
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(a.x, a.y);
          ctx.lineTo(b.x, b.y);
          var grad = ctx.createLinearGradient(a.x, a.y, b.x, b.y);
          grad.addColorStop(0, hexAlpha(a.color, opacity));
          grad.addColorStop(1, hexAlpha(b.color, opacity));
          ctx.strokeStyle = grad;
          ctx.lineWidth = (1 - dist/CONNECT_DIST) * 1.2;
          ctx.stroke();
          ctx.restore();
        }
      }
    }

    /* Conexões extras com o mouse */
    if(mouse.active){
      for(var i = 0; i < particles.length; i++){
        var p = particles[i];
        var dx = p.x - mouse.x, dy = p.y - mouse.y;
        var dist = Math.sqrt(dx*dx + dy*dy);
        if(dist < MOUSE_DIST){
          var opacity = (1 - dist/MOUSE_DIST) * 0.45;
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(mouse.x, mouse.y);
          ctx.lineTo(p.x, p.y);
          ctx.strokeStyle = hexAlpha('#EF8943', opacity);
          ctx.lineWidth = (1 - dist/MOUSE_DIST) * 1.6;
          ctx.stroke();
          ctx.restore();
        }
      }
    }

    /* Desenhar nós */
    for(var i = 0; i < particles.length; i++){
      var p = particles[i];
      ctx.save();
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
      ctx.fillStyle = hexAlpha(p.color, p.alpha);
      ctx.fill();
      ctx.restore();
    }

    requestAnimationFrame(tick);
  }

  /* Converter hex + alpha */
  function hexAlpha(hex, a){
    var r = parseInt(hex.slice(1,3),16);
    var g = parseInt(hex.slice(3,5),16);
    var b = parseInt(hex.slice(5,7),16);
    return 'rgba('+r+','+g+','+b+','+a.toFixed(3)+')';
  }

  /* ── Eventos mouse ── */
  hero.addEventListener('mousemove', function(e){
    var rect = hero.getBoundingClientRect();
    mouse.x = e.clientX - rect.left;
    mouse.y = e.clientY - rect.top;
    mouse.active = true;
    if(glow){ glow.style.opacity='1'; glow.style.left=mouse.x+'px'; glow.style.top=mouse.y+'px'; }
  });
  hero.addEventListener('mouseleave', function(){
    mouse.active = false;
    mouse.x = -9999; mouse.y = -9999;
    if(glow) glow.style.opacity='0';
  });

  /* ── Touch ── */
  hero.addEventListener('touchmove', function(e){
    var rect = hero.getBoundingClientRect();
    var t = e.touches[0];
    mouse.x = t.clientX - rect.left;
    mouse.y = t.clientY - rect.top;
    mouse.active = true;
  }, {passive:true});
  hero.addEventListener('touchend', function(){
    mouse.active = false;
  });

  /* ── Init ── */
  resize();
  createParticles();
  tick();

  window.addEventListener('resize', function(){
    resize();
    createParticles();
  });

  /* Reduced motion */
  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){
    canvas.style.display = 'none';
  }
})();