Bb car people, for car people,
with AI at the core

.vibe-trust { --primary: #ea4d96; --secondary: #872A89; --purple: #40016E; --cool-purple: #C6B4EC; --cool-aqua: #5DD8CB; --white: #FFFFFF; position: relative; overflow: hidden; padding: 8rem 0; isolation: isolate; } .vibe-trust__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(155deg, #0d0816 0%, #200838 35%, #3a0d58 65%, #1a0530 100%); } .vibe-trust__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; display: block; } .vibe-trust__inner { position: relative; z-index: 2; } .vibe-trust__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; margin-bottom: 3rem; } .vibe-trust__eyebrow { margin: 0; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.35rem; text-transform: uppercase; color: var(--cool-purple); } .vibe-trust__pill { display: inline-flex; align-items: center; padding: 1rem 2.4rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(6px); color: var(--white); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .vibe-trust__pill:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); transform: translateY(-1px); color: var(--white); } .vibe-trust__title { margin: 0 0 2.4rem; color: var(--white); font-weight: 800; font-size: 4rem; line-height: 1.1; letter-spacing: -0.02rem; max-width: 42rem; } .vibe-trust__body { margin: 0; max-width: 60rem; font-size: 2rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); } .vibe-trust__line { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4rem; margin-top: 8rem; } .vibe-trust__line-track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(234, 77, 150, 0) 0%, rgba(234, 77, 150, 0.9) 50%, rgba(234, 77, 150, 0) 100%); box-shadow: 0 0 24px 2px rgba(234, 77, 150, 0.55); z-index: 0; animation: vibe-trust-line-pulse 3.2s ease-in-out infinite; } @keyframes vibe-trust-line-pulse { 0%, 100% { box-shadow: 0 0 14px 1px rgba(234, 77, 150, 0.4); opacity: 0.85; } 50% { box-shadow: 0 0 32px 3px rgba(234, 77, 150, 0.85); opacity: 1; } } .vibe-trust__badge { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .vibe-trust__cert-img { display: block; height: 6.4rem; width: auto; max-width: 14rem; object-fit: contain; } .vibe-trust__badge--shield { flex-direction: column; } .vibe-trust__lock { display: block; height: 11rem; width: auto; max-width: 11rem; object-fit: contain; filter: drop-shadow(0 0 18px rgba(234, 77, 150, 0.5)) drop-shadow(0 0 34px rgba(93, 216, 203, 0.22)); position: relative; z-index: 1; } .vibe-trust__lock-reflection { display: block; height: 5rem; width: auto; max-width: 11rem; object-fit: contain; object-position: top; transform: scaleY(-1); margin-top: -0.4rem; opacity: 0.28; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 80%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 80%); pointer-events: none; } @media (max-width: 767px) { .vibe-trust { padding: 6rem 0; } .vibe-trust__title { font-size: 3.6rem; } .vibe-trust__body { font-size: 1.8rem; } .vibe-trust__line { flex-direction: column; gap: 3.6rem; margin-top: 6rem; } .vibe-trust__line-track { display: none; } .vibe-trust__lock { height: 9rem; max-width: 9rem; } .vibe-trust__lock-reflection { height: 4rem; } } @media (prefers-reduced-motion: reduce) { .vibe-trust__line-track { animation: none; } } document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.vibe-trust').forEach((root) => { const canvas = root.querySelector('[data-vibe-trust-canvas]'); if (!canvas) return; const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const ctx = canvas.getContext('2d'); const colors = ['#872A89', '#C6B4EC', '#EA4D96', '#40016E', '#5DD8CB']; let particles = []; let width = 0; let height = 0; let rafId = null; function resize() { width = root.clientWidth; height = root.clientHeight; canvas.width = width * window.devicePixelRatio; canvas.height = height * window.devicePixelRatio; canvas.style.width = width + 'px'; canvas.style.height = height + 'px'; ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0); } function makeParticles() { particles = Array.from({ length: 80 }, () => ({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.25, vy: (Math.random() - 0.5) * 0.25, r: Math.random() * 1.6 + 0.6, p: Math.random() * Math.PI * 2, color: colors[Math.floor(Math.random() * colors.length)], })); } function step() { ctx.clearRect(0, 0, width, height); particles.forEach((particle) => { particle.x += particle.vx; particle.y += particle.vy; particle.p += 0.018; if (particle.x width) particle.vx *= -1; if (particle.y height) particle.vy *= -1; const alpha = 0.7 + 0.3 * Math.sin(particle.p); ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2); ctx.fillStyle = particle.color; ctx.globalAlpha = alpha * 0.8; ctx.fill(); }); ctx.globalAlpha = 1; for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { const a = particles[i]; const b = particles[j]; const dx = a.x - b.x; const dy = a.y - b.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { resize(); makeParticles(); }, 200); }); }); });