.hero { background: linear-gradient(to right, var(--color-gray-100), var(--color-background)); padding: var(--spacing-12) 0; display: flex; align-items: center; }.hero-content { flex: 1; padding-right: var(--spacing-8); }.hero-content h1 { font-size: var(--font-size-5xl); margin-bottom: var(--spacing-4); }.hero-content p { font-size: var(--font-size-lg); margin-bottom: var(--spacing-6); }.hero img { max-width: 50%; border-radius: var(--radius-lg); }.accessories-section { padding: var(--spacing-12) 0; }.accessories-section h2 { color: var(--color-primary); text-align: center; margin-bottom: var(--spacing-4); }.accessories-section p { text-align: center; margin-bottom: var(--spacing-6); }.accessories-section img { display: block; margin: 0 auto; max-width: 100%; border-radius: var(--radius-lg); }.filters-section { background-color: var(--color-gray-100); padding: var(--spacing-12) 0; }.filters-section h2 { text-align: center; }.cta-section { background-color: var(--color-primary); color: var(--color-background); padding: var(--spacing-12) 0; text-align: center; }.cta-section h2 { color: var(--color-background); }.cta-section p { color: var(--color-background); margin-bottom: var(--spacing-6); }@media (max-width: 768px) { .hero { flex-direction: column; text-align: center; }.hero-content { padding-right: 0; }.hero img { max-width: 100%; margin-top: var(--spacing-6); } }