diff --git a/web/src/pages/Home.jsx b/web/src/pages/Home.jsx
index e6ffcd8..5607502 100644
--- a/web/src/pages/Home.jsx
+++ b/web/src/pages/Home.jsx
@@ -187,6 +187,8 @@ export default function Home() {
         </div>
         <div className="container">
           <div className="marquee-mask">
+            <div className="marquee-fade marquee-fade-left" />
+            <div className="marquee-fade marquee-fade-right" />
             <div className="marquee-track">
               {marquee.map((m, i) => (
                 <div key={`${m.id}-${i}`} style={{ width: 210, flexShrink: 0, background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '22px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
diff --git a/web/src/styles.css b/web/src/styles.css
index 06e3d3d..1fe81da 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -33,11 +33,14 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
 .marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 46s linear infinite; padding: 0 10px; }
 .marquee-track:hover { animation-play-state: paused; }
-.marquee-mask {
-  position: relative;
-  overflow: hidden;
-  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+.marquee-mask { position: relative; overflow: hidden; }
+.marquee-fade {
+  position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
+}
+.marquee-fade-left { left: 0; background: linear-gradient(90deg, var(--marquee-bg, #fff), transparent); }
+.marquee-fade-right { right: 0; background: linear-gradient(270deg, var(--marquee-bg, #fff), transparent); }
+@media (max-width: 640px) {
+  .marquee-fade { width: 40px; }
 }
 
 .container { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }