.ctaContainer { display: flex; justify-content: center; margin: 2.5rem 0; } .ctaButton { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.75rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; color: #111827; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; text-decoration: none; transition: all 0.2s cubic-bezier(0.2, 0, 0, 1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .ctaButton:hover { background: #f8f9fa; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .arrow { transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1); opacity: 0.7; } .ctaButton:hover .arrow { transform: translateX(4px); opacity: 1; } /* Dark mode styles */ html[data-theme='dark'] .ctaButton { color: #fff; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } html[data-theme='dark'] .ctaButton:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }