From 56a9fa5a7baabbab1ea3a16b1daf9e5a87218446 Mon Sep 17 00:00:00 2001
From: marsiandeployer <marsiandeployer@users.noreply.github.com>
Date: Wed, 25 Mar 2026 15:05:28 +0300
Subject: [PATCH] fix: mobile responsive cards and disable GSAP opacity on
 mobile

- Add .freedom-grid to mobile media query for single-column layout
- Add fee-card padding and disable magical transform on mobile
- Force marketing-ads grid to single column on mobile
- Disable device-mockup GSAP opacity animation on mobile (was causing dark overlay)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web-placeholder/index.html | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/web-placeholder/index.html b/web-placeholder/index.html
index bf660a15..39a8172e 100644
--- a/web-placeholder/index.html
+++ b/web-placeholder/index.html
@@ -991,10 +991,27 @@
 
             .grid-2,
             .steps-grid,
-            .stats-row {
+            .stats-row,
+            .freedom-grid {
                 grid-template-columns: 1fr;
             }
 
+            .freedom-grid {
+                margin-top: 40px;
+            }
+
+            .fee-card {
+                padding: 32px 24px;
+            }
+
+            .fee-card.magical {
+                transform: none;
+            }
+
+            #marketing-ads > div {
+                grid-template-columns: 1fr !important;
+            }
+
             footer {
                 justify-content: center;
                 text-align: center;
@@ -2354,10 +2371,12 @@ <h2 class="section-headline">The Standard<br>of Integrity.</h2>
                     x: 100, y: -60, scale: 1.1
                 });
 
-                gsap.to('#device-mockup', {
-                    scrollTrigger: { trigger: '#hero', start: 'top top', end: 'bottom top', scrub: true },
-                    y: 200, scale: 1.05, opacity: 0.3
-                });
+                if (window.innerWidth > 768) {
+                    gsap.to('#device-mockup', {
+                        scrollTrigger: { trigger: '#hero', start: 'top top', end: 'bottom top', scrub: true },
+                        y: 200, scale: 1.05, opacity: 0.3
+                    });
+                }
 
                 // === MAGNETIC ELEMENTS (Design-Spells: sensory pull) ===
                 document.querySelectorAll('.cta-magnetic').forEach(btn => {