/* Global */
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Source Sans Pro', sans-serif; background-color: #F9F6EE; color: #1C2541; line-height: 1.5; }

/* Nav */
nav { background-color: #F9F6EE; padding: 1rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 999; border-bottom: 1px solid #ddd; }
.logo { height: 40px; }
.nav-links { display: flex; gap: 2rem; }
nav a { font-family: 'Poppins', sans-serif; color: #1C2541; text-decoration: none; font-weight: bold; }

/* Header */
header { position: relative; background-image: url('https://mysa-digital.com/images/how-it-works.jpg'); background-size: cover; background-position: center; padding: 4rem 1rem; text-align: center; color: white; filter: grayscale(100%); }
header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 0; }
header h1, header p { position: relative; z-index: 1; }

/* Sections */
.section { padding: 2rem 1rem; text-align: center; }
.section h2 { font-family: 'Poppins', sans-serif; font-size: 1.75rem; margin-bottom: 2rem; }

/* How It Works */
.steps { display: flex; flex-direction: column; gap: 3rem; max-width: 800px; margin: 0 auto; }
.step { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); position: relative; }
.step:not(:last-child)::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #E96C09; }

/* Images */
.how-image, .buzzboard-img, .product img { max-width: 100%; border-radius: 12px; filter: grayscale(100%); }

/* Products */
.products { display: flex; flex-direction: column; gap: 2rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 768px) { .products { flex-direction: row; justify-content: space-between; } }
.product { background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); flex: 1; display: flex; flex-direction: column; transition: transform 0.3s ease; }
.product:hover { transform: translateY(-5px) scale(1.05); }
.product h3 { font-family: 'Poppins', sans-serif; font-size: 1.2rem; margin: 1rem; }
.product p { flex-grow: 1; margin: 0 1rem 1rem; font-size: 0.95rem; }

/* Form */
.form-container { max-width: 640px; margin: 2rem auto; padding: 0 1rem; text-align: center; }

/* Footer */
footer { background: #F9F6EE; text-align: right; padding: 2rem 1rem 1rem; }
footer img { height: 80px; }

/* Floating Contact */
.floating-contact { position: fixed; bottom: 20px; right: 20px; background: #E96C09; color: white; padding: 1rem; border-radius: 50px; font-family: 'Poppins'; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.1); cursor: pointer; z-index: 1000; }
.contact-options { display: none; position: fixed; bottom: 80px; right: 20px; background: white; border: 1px solid #ccc; border-radius: 12px; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.contact-options a { display: block; color: #1C2541; margin-bottom: 0.5rem; text-decoration: none; }

/* Back to Top */
#backToTop { display: none; position: fixed; bottom: 20px; left: 20px; background: #1C2541; color: white; border: none; padding: 0.5rem 1rem; border-radius: 8px; font-family: 'Poppins'; cursor: pointer; z-index: 999; }