Manual changes saved

academy.html

@@ -6,6 +6,7 @@
     <title>Sales Academy | McGPT</title>
     
     <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+    
     <link rel="icon" type="image/png" href="Images/scaleway-logomark-white.png">
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
@@ -13,195 +14,229 @@
     
     <script>
       tailwind.config = {
-        darkMode: 'class',
         theme: {
             extend: {
                 fontFamily: { sans: ['Space Grotesk', 'sans-serif'] },
-                colors: { 
-                    primary: '#a855f7', 
-                    brandDark: '#0f051a',
-                    skyAccent: '#06b6d4',
-                    blueAccent: '#3b82f6',
-                    violetAccent: '#8b5cf6'
-                }
+                colors: { primary: '#a855f7', skyAccent: '#06b6d4', blueAccent: '#3b82f6', violetAccent: '#8b5cf6' }
             }
         }
       }
     </script>
     <style>
-        body { font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; }
-        .nav-link { @apply text-white/80 hover:text-white transition-all duration-200 relative text-sm uppercase font-bold; }
+        body { font-family: 'Space Grotesk', sans-serif; }
+        .nav-link { @apply text-white/80 hover:text-white transition-all duration-200 relative text-sm uppercase font-bold px-1; }
         .nav-link.active { @apply text-white border-b-2 border-primary; }
         
-        .hamburger-line { @apply w-6 h-0.5 bg-white transition-all duration-300; }
-        #mobileMenuButton.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
-        #mobileMenuButton.open .hamburger-line:nth-child(2) { opacity: 0; }
-        #mobileMenuButton.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
+        /* AUTH GUARD */
+        body:not(.logged-in) main, body:not(.logged-in) header nav, body:not(.logged-in) #mobileMenuBtn { display: none !important; }
 
-        /* --- THE BUTTON TILES --- */
         .why-btn { 
             @apply flex items-center justify-center py-6 px-4 rounded-[1.5rem] font-black uppercase tracking-[0.1em] text-sm md:text-lg 
                    transition-all duration-300 border-2 shadow-2xl cursor-pointer transform 
-                   hover:-translate-y-1 active:scale-95 text-center w-full backdrop-blur-md;
+                   hover:-translate-y-1 active:scale-95 text-center w-full;
+            background-color: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
         }
+        .btn-buy { border-color: rgba(6, 182, 212, 0.4); color: #06b6d4; }
+        .btn-now { border-color: rgba(59, 130, 246, 0.4); color: #3b82f6; }
+        .btn-us  { border-color: rgba(139, 92, 246, 0.4); color: #8b5cf6; }
 
-        .btn-buy { background-color: rgba(6, 182, 212, 0.1); border-color: rgba(6, 182, 212, 0.4); color: #06b6d4; }
-        .btn-now { background-color: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.4); color: #3b82f6; }
-        .btn-us  { background-color: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.4); color: #8b5cf6; }
-
-        .btn-buy.active { background-color: #06b6d4 !important; color: white !important; border-color: #06b6d4; shadow: 0 10px 30px rgba(6,182,212,0.4); }
-        .btn-now.active { background-color: #3b82f6 !important; color: white !important; border-color: #3b82f6; shadow: 0 10px 30px rgba(59,130,246,0.4); }
-        .btn-us.active  { background-color: #8b5cf6 !important; color: white !important; border-color: #8b5cf6; shadow: 0 10px 30px rgba(139,92,246,0.4); }
+        .btn-buy.active { background-color: #06b6d4 !important; color: white !important; }
+        .btn-now.active { background-color: #3b82f6 !important; color: white !important; }
+        .btn-us.active  { background-color: #8b5cf6 !important; color: white !important; }
 
-        /* --- COMPACT MODULES WITH GENEROUS INDENTATION --- */
         .content-wrap { display: none !important; }
         .content-wrap.active { display: block !important; }
 
         .module-card { 
-            @apply p-8 border transition-all flex flex-col justify-between shadow-lg;
-            background-color: rgba(255, 255, 255, 0.15); 
-            border-color: rgba(255, 255, 255, 0.2);
-            border-radius: 2rem;
-            min-height: 240px;
-        }
-        
-        .module-card:hover {
-            background-color: rgba(255, 255, 255, 0.2);
-            border-color: rgba(255, 255, 255, 0.3);
-        }
-        
-        /* Indentation Logic: Adding significant left padding to elements */
-        .module-card h3, .module-card p, .module-card span {
-            @apply pl-6 pr-4;
+            @apply flex flex-col items-center justify-between text-center transition-all;
+            padding: 2.5rem 2rem !important; 
+            background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
+            border-radius: 2.5rem !important; min-height: 360px !important; box-sizing: border-box !important;
         }
+        .active-buy { border-left: 8px solid #06b6d4 !important; }
+        .active-now { border-left: 8px solid #3b82f6 !important; }
+        .active-us   { border-left: 8px solid #8b5cf6 !important; }
 
-        /* --- AUTH GUARD --- */
-        body:not(.logged-in) nav, 
-        body:not(.logged-in) #mobileMenuButton,
-        body:not(.logged-in) #mobileMenu,
-        body:not(.logged-in) main, 
-        body:not(.logged-in) footer {
-            display: none !important;
+        .oval-button {
+            @apply px-10 py-3 rounded-full text-xs font-black uppercase tracking-widest transition-all shadow-lg transform hover:scale-105 active:scale-95;
+            margin-top: auto !important;
         }
+        .buy-theme .oval-button { background: #06b6d4; color: white; }
+        .now-theme .oval-button { background: #3b82f6; color: white; }
+        .us-theme .oval-button  { background: #8b5cf6; color: white; }
     </style>
 </head>
-<body class="bg-[#3D1862] text-white min-h-screen flex flex-col transition-colors duration-300">
+<body class="bg-[#3D1862] text-white min-h-screen flex flex-col">
 
 <header class="sticky top-0 z-[60] bg-[#0f051a]/90 backdrop-blur-lg border-b border-white/10 shadow-2xl">
-    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
-        <a href="index.html" class="flex items-center space-x-2 group shrink-0">
-            <img src="Images/scaleway-logomark-white.png" alt="Logo" class="h-6 mr-2 transition-transform group-hover:rotate-12">
-            <span class="text-xl font-bold tracking-tight text-white font-heading">McGPT</span>
+    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+        <a href="index.html" class="flex items-center space-x-2 group">
+            <img src="Images/scaleway-logomark-white.png" alt="Logo" class="h-8 transition-transform group-hover:rotate-12">
+            <span class="text-2xl font-bold tracking-tight text-white font-heading">McGPT</span>
         </a>
-        <nav class="hidden md:flex space-x-8 items-center">
-            <a href="value-mapper.html" class="nav-link py-1">Map Industry</a>
-            <a href="intel.html" class="nav-link py-1">Map Products</a>
-            <a href="proof.html" class="nav-link py-1">Proof</a>
-            <a href="scorecard.html" class="nav-link py-1">Scorecard</a>
-            <a href="strategy.html" class="nav-link py-1">Value-Centric</a>
-            <a href="academy.html" class="nav-link py-1 active">Academy</a>
+        <nav class="hidden lg:flex space-x-8 items-center">
+            <a href="value-mapper.html" class="nav-link">Map Industry</a>
+            <a href="intel.html" class="nav-link">Map Products</a>
+            <a href="proof.html" class="nav-link">Proof</a>
+            <a href="scorecard.html" class="nav-link">Scorecard</a>
+            <a href="academy.html" class="nav-link active">Sales Academy</a>
         </nav>
         <div class="flex items-center space-x-4">
             <div data-netlify-identity-button class="text-[10px] font-bold uppercase cursor-pointer hover:text-primary transition-colors"></div>
-            <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1 p-2 z-[70] bg-primary rounded-lg">
-                <span class="hamburger-line"></span><span class="hamburger-line"></span><span class="hamburger-line"></span>
-            </button>
+            <button id="mobileMenuBtn" class="lg:hidden text-white p-2"><i data-feather="menu"></i></button>
         </div>
     </div>
+    <div id="mobileMenu" class="hidden lg:hidden bg-[#0f051a] border-t border-white/10">
+        <nav class="flex flex-col p-6 space-y-4 font-bold uppercase tracking-widest text-sm">
+            <a href="value-mapper.html" class="py-3 border-b border-white/5">Map Industry</a>
+            <a href="intel.html" class="py-3 border-b border-white/5">Map Products</a>
+            <a href="proof.html" class="py-3 border-b border-white/5">Proof</a>
+            <a href="scorecard.html" class="py-3 border-b border-white/5">Scorecard</a>
+            <a href="academy.html" class="py-3 text-primary">Academy</a>
+        </nav>
+    </div>
 </header>
 
 <main class="flex-grow bg-gradient-to-br from-[#3D1862] to-[#0f051a]">
-    <div class="container mx-auto px-4 py-8">
-        <div class="text-center max-w-4xl mx-auto mb-10">
-            <h1 class="text-4xl md:text-5xl font-extrabold mb-2 tracking-tighter">Sales Academy</h1>
-            <p class="text-white/60 text-sm">To master Value-Centric selling is to master how to qualify, quantify and justify the "3 Whys"</p>
-            <p class="text-white/60 text-sm italic mt-1">Click a path below to learn more</p>
+    <div class="container mx-auto px-4 py-12">
+        <div class="text-center max-w-4xl mx-auto mb-16">
+            <h1 class="text-5xl md:text-7xl font-extrabold mb-4 tracking-tighter">Sales Academy</h1>
+            <h2 class="text-xl md:text-2xl font-medium mb-4 tracking-tighter text-white/80 italic">Qualify the "3 Whys" and master value-centric selling!</h2>
         </div>
 
-        <div class="grid grid-cols-3 gap-4 md:gap-6 w-full max-w-5xl mx-auto mb-12 px-2">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-5xl mx-auto mb-20 px-8">
             <button onclick="toggleWhy('buy')" id="btn-buy" class="why-btn btn-buy">Why Buy?</button>
             <button onclick="toggleWhy('now')" id="btn-now" class="why-btn btn-now">Why Now?</button>
             <button onclick="toggleWhy('us')" id="btn-us" class="why-btn btn-us">Why Us?</button>
         </div>
 
-        <div id="academy-content" class="max-w-[98%] mx-auto pb-12" style="display: none !important;">
+        <div id="academy-content" class="max-w-full mx-auto pb-24 hidden">
             
-            <div id="wrap-buy" class="content-wrap">
-                <div class="flex flex-col lg:flex-row gap-8 items-stretch">
-                    <div class="lg:w-1/5 flex flex-col items-center justify-center bg-white/5 rounded-[2rem] p-6 border border-white/5">
-                        <img src="Images/Sales.png" alt="Badge" class="w-32 h-32 md:w-40 md:h-40 object-contain drop-shadow-[0_10px_30px_rgba(6,182,212,0.3)]">
-                        <h2 class="text-lg md:text-xl font-extrabold text-skyAccent mt-4 uppercase tracking-widest text-center leading-tight">Identify & Listen</h2>
+            <div id="wrap-buy" class="content-wrap buy-theme">
+                <div class="flex flex-col lg:flex-row gap-10">
+                    <div class="lg:w-1/4 flex flex-col items-center justify-center bg-white/5 rounded-[3rem] p-10 border border-white/10 h-auto">
+                        <img src="Images/Sales.png" alt="Badge" class="w-48 h-48 md:w-64 md:h-64 object-contain mb-6 drop-shadow-2xl">
+                        <h2 class="text-2xl md:text-3xl font-black text-skyAccent uppercase tracking-widest text-center leading-tight">Identify & Listen</h2>
                     </div>
-                    <div class="lg:w-4/5 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
-                        <div class="module-card border-l-8 border-l-skyAccent">
-                            <div><span class="text-skyAccent text-[10px] font-bold uppercase"> Mod 01</span><h3 class="text-base font-bold mt-2"> Targeting Customers</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Master ICP mapping and win-loss analysis.</p></div>
-                            <a href="https://scaleway.360learning.com/group/66fbe9a4f3281e47975115a2/content/all" target="_blank" class="block w-[90%] mx-auto py-2 bg-skyAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-skyAccent/80">Start</a>
+                    <div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
+                        <div class="module-card active-buy">
+                            <div class="w-full">
+                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 01</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Targeting Customers</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Master ICP mapping and reverse-engineered qualification to find high-value targets.</p>
+                            </div>
+                            <a href="https://scaleway.360learning.com/group/66fbe9a4f3281e47975115a2/content/all" target="_blank" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-skyAccent">
-                            <div><span class="text-skyAccent text-[10px] font-bold uppercase"> Mod 02</span><h3 class="text-base font-bold mt-2"> Elite Prospecting</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Qualification logic and business pain identification.</p></div>
-                            <a href="https://scaleway.360learning.com/group/66fbe9a4f3281e47975115a2/content/all" target="_blank" class="block w-[90%] mx-auto py-2 bg-skyAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-skyAccent/80">Start</a>
+                        <div class="module-card active-buy">
+                            <div class="w-full">
+                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 02</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Elite Prospecting</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Learn strategic business pain identification and outreach frequency logic.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-skyAccent">
-                            <div><span class="text-skyAccent text-[10px] font-bold uppercase"> Mod 03</span><h3 class="text-base font-bold mt-2"> Buyer Engagement</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Increase SSI and engage buyers on core pain points.</p></div>
-                            <a href="https://scaleway.360learning.com/group/66fbe9a4f3281e47975115a2/content/all" target="_blank" class="block w-[90%] mx-auto py-2 bg-skyAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-skyAccent/80">Start</a>
+                        <div class="module-card active-buy">
+                            <div class="w-full">
+                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 03</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Buyer Engagement</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Navigate gatekeepers and establish authority across social selling platforms.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-skyAccent">
-                            <div><span class="text-skyAccent text-[10px] font-bold uppercase"> Mod 04</span><h3 class="text-base font-bold mt-2"> Pitching Scaleway</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Correctly position value props across industries.</p></div>
-                            <a href="https://scaleway.360learning.com/group/66fbe9a4f3281e47975115a2/content/all" target="_blank" class="block w-[90%] mx-auto py-2 bg-skyAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-skyAccent/80">Start</a>
+                        <div class="module-card active-buy">
+                            <div class="w-full">
+                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 04</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Pitching Scaleway</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Adapt our core value propositions to different industry stakeholders.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div id="wrap-now" class="content-wrap">
-                <div class="flex flex-col lg:flex-row gap-6 items-stretch">
-                    <div class="lg:w-1/5 flex flex-col items-center justify-center bg-white/5 rounded-[2rem] p-6 border border-white/5">
-                        <img src="Images/Strategic_Sales.png" alt="Badge" class="w-32 h-32 md:w-40 md:h-40 object-contain drop-shadow-[0_10px_30px_rgba(59,130,246,0.3)]">
-                        <h2 class="text-lg md:text-xl font-extrabold text-blueAccent mt-4 uppercase tracking-widest text-center leading-tight">Learn & Investigate</h2>
+            <div id="wrap-now" class="content-wrap now-theme">
+                <div class="flex flex-col lg:flex-row gap-10">
+                    <div class="lg:w-1/4 flex flex-col items-center justify-center bg-white/5 rounded-[3rem] p-10 border border-white/10 h-auto">
+                        <img src="Images/Strategic_Sales.png" alt="Badge" class="w-48 h-48 md:w-64 md:h-64 object-contain mb-6 drop-shadow-2xl">
+                        <h2 class="text-2xl md:text-3xl font-black text-blueAccent uppercase tracking-widest text-center leading-tight">Learn & Investigate</h2>
                     </div>
-                    <div class="lg:w-4/5 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
-                        <div class="module-card border-l-8 border-l-blueAccent">
-                            <div><span class="text-blueAccent text-[10px] font-bold uppercase"> Mod 05</span><h3 class="text-base font-bold mt-2"> Mapping Stakeholders</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Identify key stakeholders, deal mobilizers and access the EB.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-blueAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-blueAccent/80">Start</a>
+                    <div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
+                        <div class="module-card active-now">
+                            <div class="w-full">
+                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 05</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Mapping Stakeholders</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Identify mobilizers and map the executive power base to reduce inaction risk.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-blueAccent">
-                            <div><span class="text-blueAccent text-[10px] font-bold uppercase"> Mod 06</span><h3 class="text-base font-bold mt-2"> Meetings & Multithreaded</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Progress deals more effectively and find the power base earlier.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-blueAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-blueAccent/80">Start</a>
+                        <div class="module-card active-now">
+                            <div class="w-full">
+                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 06</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Multithreaded Deals</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Master the Challenger sale by engaging multiple stakeholders driven by motivation.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-blueAccent">
-                            <div><span class="text-blueAccent text-[10px] font-bold uppercase"> Mod 07</span><h3 class="text-base font-bold mt-2"> MEDDICC Mastery</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Build customer verified "bulletproof" business cases.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-blueAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-blueAccent/80">Start</a>
+                        <div class="module-card active-now">
+                            <div class="w-full">
+                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 07</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">MEDDICC Mastery</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Quantify verified business cases and justify unique value propositions.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-blueAccent">
-                            <div><span class="text-blueAccent text-[10px] font-bold uppercase"> Mod 08</span><h3 class="text-base font-bold mt-2"> Urgency & Upselling</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Drive urgency, quantify inaction and expand Scaleway value.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-blueAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-blueAccent/80">Start</a>
+                        <div class="module-card active-now">
+                            <div class="w-full">
+                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 08</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Urgency & Upselling</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Align solutions with objectives by quantifying the cost of doing nothing.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <div id="wrap-us" class="content-wrap">
-                <div class="flex flex-col lg:flex-row gap-6 items-stretch">
-                    <div class="lg:w-1/5 flex flex-col items-center justify-center bg-white/5 rounded-[2rem] p-6 border border-white/5">
-                        <img src="Images/ELITE_Sales.png" alt="Badge" class="w-32 h-32 md:w-40 md:h-40 object-contain drop-shadow-[0_10px_30px_rgba(139,92,246,0.3)]">
-                        <h2 class="text-lg md:text-xl font-extrabold text-violetAccent mt-4 uppercase tracking-widest text-center leading-tight">Access & Deliver</h2>
+            <div id="wrap-us" class="content-wrap us-theme">
+                <div class="flex flex-col lg:flex-row gap-10">
+                    <div class="lg:w-1/4 flex flex-col items-center justify-center bg-white/5 rounded-[3rem] p-10 border border-white/10 h-auto">
+                        <img src="Images/ELITE_Sales.png" alt="Badge" class="w-48 h-48 md:w-64 md:h-64 object-contain mb-6 drop-shadow-2xl">
+                        <h2 class="text-2xl md:text-3xl font-black text-violetAccent uppercase tracking-widest text-center leading-tight">Access & Deliver</h2>
                     </div>
-                    <div class="lg:w-4/5 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
-                        <div class="module-card border-l-8 border-l-violetAccent">
-                            <div><span class="text-violetAccent text-[10px] font-bold uppercase"> Mod 09</span><h3 class="text-base font-bold mt-2"> Maximising PSA Teams</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Partner with engineering to win complex technical deals.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-violetAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-violetAccent/80">Start</a>
+                    <div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
+                        <div class="module-card active-us">
+                            <div class="w-full">
+                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 09</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Maximising PSA</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Partner with engineering to warrant deeper technical investigation and win.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-violetAccent">
-                            <div><span class="text-violetAccent text-[10px] font-bold uppercase"> Mod 10</span><h3 class="text-base font-bold mt-2"> Solution Proposal</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Winning high-stakes technical business bids with value.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-violetAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-violetAccent/80">Start</a>
+                        <div class="module-card active-us">
+                            <div class="w-full">
+                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 10</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Solution Proposal</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Build corporate proposals that demonstrate tangible value and sell internally.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-violetAccent">
-                            <div><span class="text-violetAccent text-[10px] font-bold uppercase"> Mod 11</span><h3 class="text-base font-bold mt-2"> Forecast Mastery</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Data-driven accuracy and CRM hygiene standards.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-violetAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-violetAccent/80">Start</a>
+                        <div class="module-card active-us">
+                            <div class="w-full">
+                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 11</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Forecast Mastery</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Utilize account mapping and triggering events for data-driven accuracy.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
-                        <div class="module-card border-l-8 border-l-violetAccent">
-                            <div><span class="text-violetAccent text-[10px] font-bold uppercase"> Mod 12</span><h3 class="text-base font-bold mt-2"> Negotiation & Closing</h3><p class="text-white text-[11px] mt-3 leading-relaxed">Master mirroring and give-to-get closing tactics.</p></div>
-                            <a href="#" class="block w-[90%] mx-auto py-2 bg-violetAccent text-white rounded-lg text-[10px] font-bold uppercase text-center mt-6 transition-colors hover:bg-violetAccent/80">Start</a>
+                        <div class="module-card active-us">
+                            <div class="w-full">
+                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 12</span>
+                                <h3 class="text-lg font-black mb-4 leading-tight">Closing Deals</h3>
+                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Master negotiation tactics and BATNA to increase win rates.</p>
+                            </div>
+                            <a href="#" class="oval-button">Start</a>
                         </div>
                     </div>
                 </div>
@@ -211,30 +246,50 @@
     </div>
 </main>
 
-<footer class="bg-[#0f051a] py-8 border-t border-white/5 mt-auto">
-    <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center opacity-60">
-        <p class="text-xs text-center md:text-left">Strategic Tools Enabling Elite Sales. Contact enableingsales@scaleway.com</p>
-        <p class="text-xs mt-4 md:mt-0 uppercase tracking-widest">&copy; 2025 McGPT</p>
-    </div>
-</footer>
-
 <script>
+    // --- NETLIFY AUTH GUARD ---
     const checkAuth = (user) => {
-        if (user) { document.body.classList.add('logged-in'); } 
-        else { window.location.href = "index.html"; }
+        if (user) {
+            document.body.classList.add('logged-in');
+        } else {
+            window.location.href = "index.html";
+        }
     };
     netlifyIdentity.on('init', user => checkAuth(user));
+    netlifyIdentity.on('login', user => { checkAuth(user); netlifyIdentity.close(); });
+    netlifyIdentity.on('logout', () => window.location.href = "index.html");
+
+    // --- MOBILE MENU ---
+    function setupMobileMenu() {
+        const btn = document.getElementById('mobileMenuBtn');
+        const menu = document.getElementById('mobileMenu');
+        if (!btn || !menu) return;
+        btn.addEventListener('click', () => {
+            const isHidden = menu.classList.toggle('hidden');
+            btn.innerHTML = isHidden ? '<i data-feather="menu"></i>' : '<i data-feather="x"></i>';
+            feather.replace();
+        });
+    }
 
+    // --- ACADEMY TOGGLE LOGIC ---
     function toggleWhy(id) {
         const container = document.getElementById('academy-content');
+        container.classList.remove('hidden');
+        
         document.querySelectorAll('.why-btn').forEach(btn => btn.classList.remove('active'));
         document.querySelectorAll('.content-wrap').forEach(wrap => wrap.classList.remove('active'));
-
-        container.style.setProperty('display', 'block', 'important');
+        
         document.getElementById('btn-' + id).classList.add('active');
         document.getElementById('wrap-' + id).classList.add('active');
+        
         feather.replace();
+        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
+
+    window.onload = () => {
+        setupMobileMenu();
+        feather.replace();
+    };
 </script>
 </body>
-</html>
+</html>