<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    <!-- Performance: Resource Hints -->
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <!-- Webapp Meta Tags -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="BallCODE" />
    <meta name="theme-color" content="#0C72B3" />
    <meta name="msapplication-TileColor" content="#0C72B3" />
    <meta name="msapplication-navbutton-color" content="#0C72B3" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png" />
    <!-- Title -->
    <title>BallCode</title>
    <!-- Performance: DNS Prefetch & Preconnect -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <!-- Google Font - Optimized with font-display -->
    <link
      href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
      media="print"
      onload="this.media='all'"
    />
    <noscript><link
      href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    /></noscript>
    <!-- Link Swiper's CSS - Deferred -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
      media="print"
      onload="this.media='all'"
    />
    <noscript><link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    /></noscript>

    <!-- CSS - Critical CSS inline, rest deferred -->
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!-- Header -->
    <!-- METHOD 3: Inline style for highest priority - Using BallCODE_Header_Image.jpg with absolute path for Netlify -->
    <header class="header" style="background-image: url('/assets/images/BallCODE_Header_Image.jpg');">
      <div class="header-top">
        <div class="container">
          <div class="header-top-content" style="display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%;">
            <a href="#" class="header-top-logo" style="justify-self: start;">
              <img
                src="./assets/images/ballcode-logo.png"
                alt="BallCode logo"
              />
            </a>
            <nav class="header-top-navbar" style="justify-content: center; justify-self: center;">
              <a href="#" class="header-top-navlink">Home</a>
              <a href="#books" class="header-top-navlink">Books</a>
              <a href="#about" class="header-top-navlink">About</a>
              <a href="/teachers/" class="header-top-navlink">Teachers</a>
              <a href="#contact" class="header-top-navlink">Contact</a>
            </nav>
            <div style="justify-self: end; display: flex; align-items: center; gap: 20px;">
              <a href="#contact" class="header-top-cta">Request a School Pilot</a>
              <button class="header-hamburger-btn">
                <img src="./assets/svg/menu.svg" alt="Menu" />
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="header-content">
        <div class="container">
          <!-- BallCODE Title with Animated Text -->
          <h1 class="header-title">Ball<span>CODE</span></h1>
          <div class="marquee">
            <p>Learn Coding Through Basketball • Build Skills Through Play • Code Like a Pro • Learn Coding Through Basketball • Build Skills Through Play • Code Like a Pro</p>
          </div>
          <div style="text-align: center; margin-top: 40px;">
            <a href="#contact" class="header-cta">REQUEST A SCHOOL PILOT</a>
          </div>
        </div>
      </div>
    </header>

    <!-- Main -->
    <main>
      <div class="content-bg">
        <!-- Books-Section -->
        <section class="books" id="books">
          <div class="container">
            <h2 class="books-title">BallCODE Bundles</h2>
            <p class="books-subtitle">School-first. Bundle-first. The fastest way to launch is to adopt BallCODE as a complete pathway—stories + quick challenges + a clear Blocks → Bridge → Python progression.</p>
            
            <div class="books-grid">
              <!-- Bundle: BallCODE Starter Bundle -->
              <div class="books-card" style="border: 2px solid rgba(255, 107, 53, 0.6);">
                <div class="books-card-thumbnail">
                  <img src="./assets/images/book1-title-page.png" alt="BallCODE Starter Bundle" loading="lazy" />
                  <span class="books-card-badge" style="background: #FF6B35;">Best Value</span>
                  <span class="books-card-play">▶</span>
                </div>
                <div class="books-card-content">
                  <div class="books-card-title-wrapper">
                    <h3 class="books-card-title-large">STARTER<br>BUNDLE</h3>
                  </div>
                  <p class="books-card-text">Everything needed to get students started—bundled. Schools use this as the pilot launch pack, then extend access to parents for home continuation.</p>
                  
                  <div class="books-card-includes">
                    <p class="books-card-includes-title">What You Get:</p>
                    <ul class="books-card-includes-list">
                      <li>📚 Book modules (story-first learning)</li>
                      <li>🎮 Short interactive challenges (60–90 seconds)</li>
                      <li>🧠 Blocks → Bridge → Python progression</li>
                      <li>🏫 School rollout + parent email templates</li>
                    </ul>
                  </div>
                  
                  <p class="books-card-price">Bundle pricing available</p>
                  <a href="#contact" class="books-card-button">Request a School Pilot →</a>
                  
                  <details class="books-card-access-info">
                    <summary class="books-card-access-summary">How parents get access</summary>
                    <div class="books-card-access-details">
                      <ol>
                        <li>Your school launches BallCODE (pilot or annual license)</li>
                        <li>We provide parent-ready email templates + access instructions</li>
                        <li>Parents continue at home alongside the classroom pathway</li>
                      </ol>
                    </div>
                  </details>
                </div>
              </div>

              <!-- Book 1: The Foundation Block -->
              <div class="books-card">
                <div class="books-card-thumbnail">
                  <img src="./assets/images/book1-title-page.png" alt="Book 1: The Foundation Block" loading="lazy" decoding="async" />
                  <span class="books-card-badge">Available</span>
                  <span class="books-card-play">▶</span>
                </div>
                <div class="books-card-content">
                  <div class="books-card-title-wrapper">
                    <h3 class="books-card-title-large">BOOK 1: THE<br>FOUNDATION<br>BLOCK</h3>
                  </div>
                  <p class="books-card-text">Nova's team is trapped by a full-court press. Every fancy move fails. Watch how she learns that the simplest move—the pound dribble—is the foundation of everything. Then practice what you learned in the game!</p>
                  
                  <div class="books-card-includes">
                    <p class="books-card-includes-title">What You Get:</p>
                    <ul class="books-card-includes-list">
                      <li>📖 Fun basketball story video</li>
                      <li>🎮 Play the game (password sent instantly)</li>
                      <li>🏀 Practice the moves from the story</li>
                    </ul>
                  </div>
                  
                  <p class="books-card-price">Included in bundle (individual access available)</p>
                  <a href="https://9768426137106.gumroad.com/l/gxgzv" target="_blank" rel="noopener noreferrer" class="books-card-button">Get Book 1 (Individual) →</a>
                  <a href='/books/book1' style='display: inline-block; margin-top: 1rem; color: #0C72B3; text-decoration: none; font-weight: 600;'>Read Book 1 →</a>
                  
                  <details class="books-card-access-info">
                    <summary class="books-card-access-summary">How to Play After Buying</summary>
                    <div class="books-card-access-details">
                      <ol>
                        <li>After purchase, you'll get a password on the thank you page</li>
                        <li>Go to ballcode.netlify.app and sign up</li>
                        <li>Click "Ballcode mode" → "Curriculum" → "Play" → "#1"</li>
                        <li>Enter your password to start playing!</li>
                      </ol>
                    </div>
                  </details>
                </div>
              </div>
              
              <!-- Book 2: Code to Create Space -->
              <div class="books-card">
                <div class="books-card-thumbnail">
                  <img src="./assets/images/book2-code-to-create-space.png" alt="Book 2: Code to Create Space" loading="lazy" />
                  <span class="books-card-badge coming-soon">Coming Soon</span>
                  <span class="books-card-play">▶</span>
                </div>
                <div class="books-card-content">
                  <div class="books-card-title-wrapper">
                    <h3 class="books-card-title-large">BOOK 2: CODE<br>TO CREATE<br>SPACE</h3>
                  </div>
                  <p class="books-card-text">Nova faces a defender who reads every move. She tries the same direction every time, but the defender is always there. Watch how she learns to make decisions based on what she sees. Then practice in the game!</p>
                  <p class="books-card-price">Included in bundle</p>
                  <a href="#" class="books-card-button disabled">Coming Soon</a>
                </div>
              </div>
              
              <!-- Book 3: The Pattern (In & Out Dribble) - NEW IDEATION -->
              <div class="books-card">
                <div class="books-card-thumbnail">
                  <img src="./assets/images/book3-pattern.png" alt="Book 3: The Pattern (In & Out Dribble)" loading="lazy" decoding="async" onerror="this.style.display='none';" />
                  <span class="books-card-badge coming-soon">Coming Soon</span>
                  <span class="books-card-play">▶</span>
                </div>
                <div class="books-card-content">
                  <div class="books-card-title-wrapper">
                    <h3 class="books-card-title-large">BOOK 3: THE<br>PATTERN (IN & OUT<br>DRIBBLE)</h3>
                  </div>
                  <p class="books-card-text">Nova faces a defender who reacts instantly. Simple fakes don't work. Watch how she learns to create patterns, build expectation, then break the pattern at the perfect moment. Then practice in the game!</p>
                  
                  <div class="books-card-includes">
                    <p class="books-card-includes-title">What You Get:</p>
                    <ul class="books-card-includes-list">
                      <li>📖 Fun basketball story video</li>
                      <li>🎮 Play the game challenge</li>
                      <li>🏀 Learn the in & out dribble move</li>
                    </ul>
                  </div>
                  
                  <p class="books-card-price">Included in bundle</p>
                  <a class='books-card-button' href='/books/book3' style='opacity: 0.7;'>Preview Book 3 →</a>
                </div>
              </div>
            </div>
            
            <!-- Schools CTA Section - Enhanced -->
            <section class="school-cta-section" style="background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(12, 114, 179, 0.15) 100%); border-radius: 16px; padding: 48px 32px; margin: 64px 0; border: 2px solid rgba(255, 107, 53, 0.3); position: relative; overflow: hidden;">
              <!-- Decorative elements -->
              <div style="position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(255, 107, 53, 0.1); border-radius: 50%; z-index: 0;"></div>
              <div style="position: absolute; bottom: -30px; left: -30px; width: 150px; height: 150px; background: rgba(12, 114, 179, 0.1); border-radius: 50%; z-index: 0;"></div>
              
              <div class="container" style="position: relative; z-index: 1;">
                <!-- Header -->
                <div style="text-align: center; margin-bottom: 40px;">
                  <h2 style="color: #FF6B35; font-size: 2.5rem; margin-bottom: 16px; font-weight: 700;">🏫 Sign Up for BallCODE in Your School</h2>
                  <p style="color: rgba(255, 255, 255, 0.95); font-size: 1.3rem; max-width: 800px; margin: 0 auto; line-height: 1.6;">
                    Get immediate access to our complete integrated curriculum package—everything you need to start teaching coding through basketball this week.
                  </p>
                </div>

                <!-- What You Receive Grid -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 40px;">
                  
                  <!-- Professional Development Plan -->
                  <div style="background: rgba(0, 0, 0, 0.4); border-radius: 12px; padding: 28px; border-left: 4px solid #FF6B35; transition: transform 0.3s, box-shadow 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 24px rgba(255, 107, 53, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                    <div style="font-size: 2.5rem; margin-bottom: 16px;">📚</div>
                    <h3 style="color: #FF6B35; font-size: 1.8rem; margin-bottom: 12px; font-weight: 600;">Complete Professional Development Plan</h3>
                    <ul style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; padding-left: 0; list-style: none; font-size: 0.95rem;">
                      <li style="margin-bottom: 8px; font-size: 0.95rem;">✅ Self-service onboarding guide</li>
                      <li style="margin-bottom: 8px; font-size: 0.95rem;">✅ Step-by-step implementation instructions</li>
                      <li style="margin-bottom: 8px; font-size: 0.95rem;">✅ No training required—ready to use immediately</li>
                      <li style="margin-bottom: 8px; font-size: 0.95rem;">✅ Support resources and contact information</li>
                      <li style="font-size: 0.95rem;">✅ Flexible implementation options</li>
                    </ul>
                  </div>

                  <!-- Complete Curriculum -->
                  <div style="background: rgba(0, 0, 0, 0.4); border-radius: 12px; padding: 28px; border-left: 4px solid #0C72B3; transition: transform 0.3s, box-shadow 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 24px rgba(12, 114, 179, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                    <div style="font-size: 2.5rem; margin-bottom: 16px;">🎓</div>
                    <h3 style="color: #0C72B3; font-size: 1.8rem; margin-bottom: 12px; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; line-height: 1.6;">Full Integrated Curriculum</h3>
                    <ul style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; padding-left: 0; list-style: none; font-size: 1rem;">
                      <li style="margin-bottom: 8px;">✅ Complete lesson plans (45-90 minutes)</li>
                      <li style="margin-bottom: 8px;">✅ Learning objectives aligned to standards</li>
                      <li style="margin-bottom: 8px;">✅ Answer keys for all exercises</li>
                      <li style="margin-bottom: 8px;">✅ Assessment rubrics and tools</li>
                      <li>✅ CSTA, Common Core, and NGSS aligned</li>
                    </ul>
                  </div>

                  <!-- Books & Stories -->
                  <div style="background: rgba(0, 0, 0, 0.4); border-radius: 12px; padding: 28px; border-left: 4px solid #FF6B35; transition: transform 0.3s, box-shadow 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 24px rgba(255, 107, 53, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                    <div style="font-size: 2.5rem; margin-bottom: 16px;">📖</div>
                    <h3 style="color: #FF6B35; font-size: 1.8rem; margin-bottom: 12px; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; line-height: 1.6;">Interactive Books & Stories</h3>
                    <ul style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; padding-left: 0; list-style: none; font-size: 1rem;">
                      <li style="margin-bottom: 8px;">✅ Episode 1: The Tip-off Trial (complete story)</li>
                      <li style="margin-bottom: 8px;">✅ Basketball framework integration</li>
                      <li style="margin-bottom: 8px;">✅ Coding concepts embedded in narrative</li>
                      <li style="margin-bottom: 8px;">✅ Skill Pit-Stop educational sections</li>
                      <li>✅ Ready-to-use immediately</li>
                    </ul>
                  </div>

                  <!-- Games & Interactive Exercises -->
                  <div style="background: rgba(0, 0, 0, 0.4); border-radius: 12px; padding: 28px; border-left: 4px solid #0C72B3; transition: transform 0.3s, box-shadow 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 24px rgba(12, 114, 179, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                    <div style="font-size: 2.5rem; margin-bottom: 16px;">🎮</div>
                    <h3 style="color: #0C72B3; font-size: 1.8rem; margin-bottom: 12px; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; line-height: 1.6;">Interactive Games & Exercises</h3>
                    <ul style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; padding-left: 0; list-style: none; font-size: 1rem;">
                      <li style="margin-bottom: 8px;">✅ Password-based game access (no account needed)</li>
                      <li style="margin-bottom: 8px;">✅ Three ready-to-use exercises (A, B, C)</li>
                      <li style="margin-bottom: 8px;">✅ Interactive coding challenges</li>
                      <li style="margin-bottom: 8px;">✅ Integrated with story content</li>
                      <li>✅ Immediate access after signup</li>
                    </ul>
                  </div>

                </div>

                <!-- Key Benefits Banner -->
                <div style="background: rgba(255, 107, 53, 0.2); border-radius: 12px; padding: 24px; margin-bottom: 32px; border: 1px solid rgba(255, 107, 53, 0.4);">
                  <h3 style="color: #FF6B35; font-size: 1.5rem; margin-bottom: 16px; text-align: center; font-weight: 600;">🎯 Everything is Integrated to Help Kids Learn Coding Through Sport</h3>
                  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; text-align: center;">
                    <div>
                      <div style="font-size: 1.8rem; margin-bottom: 8px;">⚡</div>
                      <p style="color: rgba(255, 255, 255, 0.95); font-size: 1rem; font-weight: 500;">Delivered Within 24 Hours</p>
                    </div>
                    <div>
                      <div style="font-size: 1.8rem; margin-bottom: 8px;">🚀</div>
                      <p style="color: rgba(255, 255, 255, 0.95); font-size: 1rem; font-weight: 500;">Start Using This Week</p>
                    </div>
                    <div>
                      <div style="font-size: 1.8rem; margin-bottom: 8px;">📋</div>
                      <p style="color: rgba(255, 255, 255, 0.95); font-size: 1rem; font-weight: 500;">No Training Required</p>
                    </div>
                    <div>
                      <div style="font-size: 1.8rem; margin-bottom: 8px;">💬</div>
                      <p style="color: rgba(255, 255, 255, 0.95); font-size: 1rem; font-weight: 500;">24-Hour Support Response</p>
                    </div>
                  </div>
                </div>

                <!-- CTA Button -->
                <div style="text-align: center;">
                  <a href="#contact" class="books-card-button" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #0C72B3 100%); color: white; padding: 18px 48px; border-radius: 12px; text-decoration: none; font-size: 1.2rem; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4); text-transform: uppercase; letter-spacing: 1px;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 24px rgba(255, 107, 53, 0.6)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 16px rgba(255, 107, 53, 0.4)';">
                    Sign Up for Your School →
                  </a>
                  <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; margin-top: 16px;">
                    Free pilot program • Complete package • Ready to use immediately
                  </p>
                </div>
              </div>
            </section>
          </div>
        </section>

        <!-- Book 2: Block Coding Preview Section -->
        <section class="book-preview-section" id="book2-preview" style="background: rgba(0, 6, 26, 0.8); padding: 60px 20px; margin: 40px 0;">
          <div class="container">
            <div style="max-width: 1000px; margin: 0 auto;">
              <h2 style="color: #FF6B35; font-size: 2.5rem; margin-bottom: 20px; text-align: center;">BOOK 2: Block Coding Preview</h2>
              <p style="color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; text-align: center; margin-bottom: 40px;">
                Learn visual programming through decision-making on the court
              </p>
              
              <div style="background: rgba(255, 107, 53, 0.1); border-radius: 16px; padding: 40px; border: 2px solid rgba(255, 107, 53, 0.3);">
                <h3 style="color: #FF6B35; font-size: 1.8rem; margin-bottom: 24px; text-align: center;">What You\'ll Learn</h3>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px; max-width: 800px; margin-left: auto; margin-right: auto;">
                  <div style="background: rgba(255, 255, 255, 0.05); padding: 24px; border-radius: 12px; border-left: 4px solid #FF6B35;">
                    <h4 style="color: #FF6B35; margin-bottom: 12px; font-size: 1.6rem; font-weight: 600;">🎯 Block Coding Concepts</h4>
                    <ul style="color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin: 0; padding-left: 20px; font-size: 1rem;">
                      <li>Decision blocks (if/then logic)</li>
                      <li>Conditional statements</li>
                      <li>Event-driven programming</li>
                      <li>Sequential thinking</li>
                    </ul>
                  </div>
                  
                  <div style="background: rgba(255, 255, 255, 0.05); padding: 24px; border-radius: 12px; border-left: 4px solid #0C72B3;">
                    <h4 style="color: #0C72B3; margin-bottom: 12px; font-size: 1.6rem; font-weight: 600;">🏀 Basketball Skills</h4>
                    <ul style="color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin: 0; padding-left: 20px; font-size: 1rem;">
                      <li>Reading the defense</li>
                      <li>Crossover dribble technique</li>
                      <li>Creating space</li>
                      <li>Decision-making under pressure</li>
                    </ul>
                  </div>
                </div>

                <div style="background: rgba(0, 0, 0, 0.3); padding: 24px; border-radius: 12px; margin-top: 24px; max-width: 700px; margin-left: auto; margin-right: auto;">
                  <h4 style="color: #FF6B35; margin-bottom: 16px; font-size: 1.3rem; text-align: center;">📋 Example Exercise Structure</h4>
                  <p style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin-bottom: 16px;">
                    Students will use visual blocks to program a player's response to different defensive situations. The exercise teaches:
                  </p>
                  <div style="background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); line-height: 1.8;">
                    <div style="margin-bottom: 12px;">[IF] Defender is on left side</div>
                    <div style="margin-left: 20px; margin-bottom: 12px;">→ [THEN] Execute crossover to right</div>
                    <div style="margin-bottom: 12px;">[ELSE]</div>
                    <div style="margin-left: 20px;">→ [THEN] Continue current direction</div>
                  </div>
                  <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin-top: 16px; font-style: italic;">
                    * Full exercise includes interactive blocks, visual feedback, and progressive challenges
                  </p>
                </div>

                <div style="text-align: center; margin-top: 32px;">
                  <p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 20px;">Want to see the full exercise?</p>
                  <form class="contact-form" name="book2-preview" method="POST" data-netlify="true" netlify-honeypot="bot-field" style="max-width: 500px; margin: 0 auto;">
                    <input type="hidden" name="form-name" value="book2-preview" />
                    <p style="display: none;">
                      <label>Don't fill this out: <input name="bot-field" /></label>
                    </p>
                    <div class="contact-form-field">
                      <input type="email" name="email" placeholder="Enter Your Email" required />
                    </div>
                    <button type="submit" class="contact-form-btn">Get Book 2 Preview</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Book 3: Python Introduction Preview Section -->
        <section class="book-preview-section" id="book3-preview" style="background: rgba(0, 6, 26, 0.8); padding: 60px 20px; margin: 40px 0;">
          <div class="container">
            <div style="max-width: 1000px; margin: 0 auto;">
              <h2 style="color: #FF6B35; font-size: 2.5rem; margin-bottom: 20px; text-align: center;">BOOK 3: Introduction to Python</h2>
              <p style="color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; text-align: center; margin-bottom: 40px;">
                Transition from blocks to text-based coding through pattern recognition
              </p>
              
              <div style="background: rgba(255, 107, 53, 0.1); border-radius: 16px; padding: 40px; border: 2px solid rgba(255, 107, 53, 0.3);">
                <h3 style="color: #FF6B35; font-size: 1.8rem; margin-bottom: 24px; text-align: center;">What You\'ll Learn</h3>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px; max-width: 800px; margin-left: auto; margin-right: auto;">
                  <div style="background: rgba(255, 255, 255, 0.05); padding: 24px; border-radius: 12px; border-left: 4px solid #FF6B35;">
                    <h4 style="color: #FF6B35; margin-bottom: 12px; font-size: 1.6rem; font-weight: 600;">🐍 Python Fundamentals</h4>
                    <ul style="color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin: 0; padding-left: 20px; font-size: 1rem;">
                      <li>Basic syntax and structure</li>
                      <li>Variables and data types</li>
                      <li>Loops and patterns</li>
                      <li>Functions and sequences</li>
                    </ul>
                  </div>
                  
                  <div style="background: rgba(255, 255, 255, 0.05); padding: 24px; border-radius: 12px; border-left: 4px solid #0C72B3;">
                    <h4 style="color: #0C72B3; margin-bottom: 12px; font-size: 1.6rem; font-weight: 600;">🏀 Basketball Skills</h4>
                    <ul style="color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin: 0; padding-left: 20px; font-size: 1rem;">
                      <li>In & out dribble move</li>
                      <li>Pattern recognition</li>
                      <li>Timing and rhythm</li>
                      <li>Breaking patterns effectively</li>
                    </ul>
                  </div>
                </div>

                <div style="background: rgba(0, 0, 0, 0.3); padding: 24px; border-radius: 12px; margin-top: 24px; max-width: 700px; margin-left: auto; margin-right: auto;">
                  <h4 style="color: #FF6B35; margin-bottom: 16px; font-size: 1.3rem; text-align: center;">📋 Example Exercise Structure</h4>
                  <p style="color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin-bottom: 16px;">
                    Students will write Python code to create dribble patterns. The exercise introduces:
                  </p>
                  <div style="background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); line-height: 1.8;">
                    <div style="margin-bottom: 12px;"># Create a dribble pattern</div>
                    <div style="margin-bottom: 12px;">pattern = ["in", "out", "in", "out"]</div>
                    <div style="margin-bottom: 12px;">for move in pattern:</div>
                    <div style="margin-left: 20px; margin-bottom: 12px;">&nbsp;&nbsp;execute_dribble(move)</div>
                    <div style="margin-bottom: 12px;"># Break pattern at key moment</div>
                    <div>break_pattern()</div>
                  </div>
                  <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin-top: 16px; font-style: italic;">
                    * Full exercise includes syntax practice, pattern building, and interactive coding challenges
                  </p>
                </div>

                <div style="text-align: center; margin-top: 32px;">
                  <p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 20px;">Want to see the full exercise?</p>
                  <form class="contact-form" name="book3-preview" method="POST" data-netlify="true" netlify-honeypot="bot-field" style="max-width: 500px; margin: 0 auto;">
                    <input type="hidden" name="form-name" value="book3-preview" />
                    <p style="display: none;">
                      <label>Don't fill this out: <input name="bot-field" /></label>
                    </p>
                    <div class="contact-form-field">
                      <input type="email" name="email" placeholder="Enter Your Email" required />
                    </div>
                    <button type="submit" class="contact-form-btn">Get Book 3 Preview</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- About-Section -->
        <section class="about">
          <div class="container">
            <h1 class="about-title">ABOUT US</h1>
            <p class="about-text">
              At <span>BallCODE Game</span>, we believe in merging the thrill of
              sports with the power of STEM education to inspire the next
              generation. Our innovative platform combines the energy of
              basketball with hands on learning in coding, robotics, and
              critical thinking.
            </p>
          </div>
        </section>

        <!-- Features-Section -->
        <section class="features">
          <div class="container">
            <h2 class="features-title">OUR KEY FEATURES</h2>
            <p class="features-text">
              Basketball Meets Coding: Learn. Solve. Analyze. Innovate!
            </p>
            <div class="features-cards">
              <div class="features-card">
                <img
                  src="./assets/images/BallCODE_Website_1.jpg"
                  alt="Basketball and Coding Fusion"
                  class="features-card-img"
                  loading="lazy"
                />
                <h4 class="features-card-title">
                  Basketball and Coding <br />
                  Fusion
                </h4>
                <p class="features-card-text">
                  Combines the dynamics of basketball with the logic of coding,
                  making STEM accessible and exciting for youth, where players
                  learn basic coding commands to control robot movements,
                  simulating the agility and precision needed on the court.
                </p>
              </div>
              <div class="features-card">
                <img
                  src="./assets/images/BallCODE_Website_3.jpg"
                  alt="Real World Problem Solving"
                  class="features-card-img"
                  loading="lazy"
                  decoding="async"
                />
                <h4 class="features-card-title">
                  Real World <br />
                  Problem Solving
                </h4>
                <p class="features-card-text">
                  Encourages strategic thinking and critical problem solving as
                  players code their way through basketball challenges, applying
                  analytical skills to overcome obstacles and succeed.
                </p>
              </div>
              <div class="features-card">
                <img
                  src="./assets/images/BallCODE_Website_4.jpg"
                  alt="Interactive Analytics"
                  class="features-card-img"
                  loading="lazy"
                />
                <h4 class="features-card-title">
                  Interactive <br />
                  Analytics
                </h4>
                <p class="features-card-text">
                  Introduces kids to the fundamentals of sports analytics,
                  enabling them to track and analyze their performance data,
                  making data literacy engaging.
                </p>
              </div>
              <div class="features-card">
                <img
                  src="./assets/images/BallCODE_Website_5.jpg"
                  alt="Hands On Robotics"
                  class="features-card-img"
                  loading="lazy"
                  decoding="async"
                />
                <h4 class="features-card-title">
                  Hands On <br />
                  Robotics
                </h4>
                <p class="features-card-text">
                  Players interact with programmable robots, learning about
                  robotics and technology in a fun, sports themed environment
                </p>
              </div>
            </div>
          </div>
        </section>

        <!-- Video-Section -->
        <section class="video">
          <div class="container">
            <div class="video_player">
              <video
                class="ballcode-video"
                poster="./assets/images/Who_we_are.png"
                controls
                preload="metadata"
                loading="lazy"
              >
                <source
                  src="./assets/images/ballcode-video.mp4"
                  type="video/mp4"
                />
              </video>
            </div>
          </div>
        </section>

        <!-- Benefits-Section -->
        <section class="benefits">
          <h2 class="benefits-title">Educational Benefits</h2>
          <div class="benefits-card benefits-card-stem">
            <div class="benefits-card-content">
              <h4 class="benefits-card-title">STEM Skill Building</h4>
              <p class="benefits-card-text">
                Teaches coding, robotics, and analytics in an intuitive,
                game based format.
              </p>
            </div>
          </div>
          <div class="benefits-card benefits-card-play">
            <div class="benefits-card-content">
              <h4 class="benefits-card-title">Engagement Through Play</h4>
              <p class="benefits-card-text">
                Uses the universal appeal of sports to maintain student 
                interest and foster a learning environment centered on 
                play
              </p>
            </div>
          </div>
          <div class="benefits-card benefits-card-tech">
            <div class="benefits-card-content">
              <h4 class="benefits-card-title">Practical Tech Experience</h4>
              <p class="benefits-card-text">
                Provides hands on robotics experience, 
                reinforcing classroom learning with real world applications.
              </p>
            </div>
          </div>
        </section>

        <!-- Future-Section -->
        <section class="future">
          <div class="container">
            <h2 class="future-title">Future Expansion</h2>
            <p class="future-text">
              In line with BallCODE’s mission to bridge sports with STEM, plans
              are underway to expand the platform with advanced coding
              challenges and analytics dashboards that track player progress,
              along with a gamified system for performance tracking, keeping
              students engaged as they grow.
            </p>
          </div>
        </section>

        <!-- Gallery-Section -->
        <section class="gallery">
          <h1 class="gallery-title">Gallery</h1>
          <div class="swiper gallerySlider">
            <div class="swiper-wrapper">
              <!-- <div class="swiper-slide">
                <img src="./assets/images/Screenshot_1.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./assets/images/Screenshot_2.png" alt="" />
              </div> -->
              <div class="swiper-slide">
                <img src="./assets/images/Screenshot_3.png" alt="BallCode game screenshot" loading="lazy" />
              </div>
              <div class="swiper-slide">
                <img src="./assets/images/two-kids-playing-on-computer.JPG" alt="Two kids playing BallCode on computer" loading="lazy" />
              </div>
              <div class="swiper-slide">
                <img src="./assets/images/r-teaching-class.JPG" alt="Teacher teaching BallCode in class" loading="lazy" />
              </div>
              <div class="swiper-slide">
                <img src="./assets/images/r-teaching-on-computer.JPEG" alt="Teacher demonstrating BallCode on computer" loading="lazy" />
              </div>
              <div class="swiper-slide">
                <img src="./assets/images/boys-using-computer.JPG" alt="Boys using BallCode on computer" loading="lazy" />
              </div>
              <!-- <div class="swiper-slide">
                <img src="./assets/images/classroom-of-children.JPG" alt="Classroom of children learning BallCODE" />
              </div> -->
              <div class="swiper-slide">
                <img src="./assets/images/closeup-of-game.JPG" alt="Closeup of BallCode game" loading="lazy" />
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </section>

        <!-- Reviews-Section -->
        <section class="reviews">
          <div class="reviews-content">
            <h2 class="reviews-title">check our reviews</h2>
            <div class="reviews-slider">
              <div class="swiper reviewsSlider">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="reviews-card">
                      <div class="reviews-card-header">
                        <!-- <img
                          src="./assets/images/avatar.png"
                          alt=""
                          class="reviews-card-avatar"
                        /> -->
                        <h3 class="reviews-card-name">A. Wilson</h3>
                      </div>
                      <p class="reviews-card-text">
                        I like the fact that it teaches my son basketball, 
                        but I love that it teaches him the fundamentals of coding as well.
                        I will definitely download the BallCode game when it becomes available.  
                      </p>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="reviews-card">
                      <div class="reviews-card-header">
                        <!-- <img
                          src="./assets/images/avatar.png"
                          alt=""
                          class="reviews-card-avatar"
                        /> -->
                        <h3 class="reviews-card-name">R. Hingle</h3>
                      </div>
                      <p class="reviews-card-text">
                        My daughter likes the game and is intrigued about 
                        numbers. The BallCode game is both educational and fun. 
                        This is one game that I will download for her to play on her tablet
                      </p>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="reviews-card">
                      <div class="reviews-card-header">
                        <!-- <img
                          src="./assets/images/avatar.png"
                          alt=""
                          class="reviews-card-avatar"
                        /> -->
                        <h3 class="reviews-card-name">A. Alavi</h3>
                      </div>
                      <p class="reviews-card-text">
                        My son love the ball code game and can't
                        wait for it to come out to download.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Slogan-Section -->
        <section class="slogan">
          <div class="container">
            <div class="slogan-content">
              <div class="slogan-image">
                <img src="./assets/images/ballcode.png" alt="BallCode logo" loading="lazy" decoding="async" />
              </div>
              <p class="slogan-text">
                The game is not only a fun activity but also a stepping stone to
                careers in technology and analytics.
              </p>
            </div>
          </div>
        </section>

        <!-- FAQ-Section -->
        <section class="faq">
          <div class="container">
            <h2 class="faq-title">FAQs</h2>
            <div class="faq-content">
              <div class="faq-item">
                <div class="faq-question">
                  <span>How to play?</span>
                  <span class="faq-icon">+</span>
                </div>
                <div class="faq-answer">
                  BallCODE combines basketball stories with interactive coding exercises. Start by reading Book 1, then click "Try the Exercise" to practice what you learned in the game. Each book teaches coding concepts through basketball!
                </div>
              </div>
              <div class="faq-item">
                <div class="faq-question">
                  <span>How do I sign up?</span>
                  <span class="faq-icon">+</span>
                </div>
                <div class="faq-answer">
                  For individual access, purchase Book 1 on Gumroad and you'll receive instant access. For schools, use the contact form above to request a pilot program. We offer free pilot programs to select schools!
                </div>
              </div>
              <div class="faq-item">
                <div class="faq-question">
                  <span>How do I access the social community?</span>
                  <span class="faq-icon">+</span>
                </div>
                <div class="faq-answer">
                  Follow us on Instagram (@ballc0de), Twitter/X (@ballc0de), and TikTok (@ballc0de) for updates, student success stories, and coding tips. Join our community of educators and students learning coding through basketball!
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- Impact Stories (Student Outcomes) -->
        <section class="impact-stories" id="impact" style="padding: 80px 0;">
          <div class="container">
            <h2 style="font-size: 2.2rem; margin-bottom: 12px; text-align: center;">Real Student Impact</h2>
            <p style="color: rgba(255, 255, 255, 0.85); max-width: 900px; line-height: 1.6; margin-bottom: 28px; margin-left: auto; margin-right: auto; text-align: center;">
              Every time a student finishes a story moment and completes a challenge, we capture the kind of outcome schools and families care about: confidence, language, and follow-through.
            </p>

            <div id="impact-story-card" style="background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 28px; max-width: 980px; margin: 0 auto;">
              <div style="display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;">
                <h3 id="impact-headline" style="color: #FF6B35; font-size: 1.6rem; margin: 0;">From quitting to confident</h3>
                <span id="impact-grade" style="color: rgba(255, 255, 255, 0.75); font-size: 0.95rem;">Grades 3–5</span>
              </div>
              <p id="impact-story" style="color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin-bottom: 16px;">
                A student who used to shut down during math finished the story, then said, “Let me try one more time.” After three quick tries, they completed the challenge and started explaining the steps out loud like a coach.
              </p>
              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 600px; margin: 0 auto;">
                <div style="background: rgba(0,0,0,0.25); border-radius: 12px; padding: 14px;">
                  <div style="font-weight: 600; margin-bottom: 6px;">Outcome</div>
                  <div id="impact-outcome" style="color: rgba(255, 255, 255, 0.85);">Stayed engaged and completed the full session</div>
                </div>
                <div style="background: rgba(0,0,0,0.25); border-radius: 12px; padding: 14px;">
                  <div style="font-weight: 600; margin-bottom: 6px;">Skill</div>
                  <div id="impact-skill" style="color: rgba(255, 255, 255, 0.85);">Sequences (step-by-step thinking)</div>
                </div>
              </div>
              <div style="text-align: center; margin-top: 18px;">
                <a href="#contact" class="books-card-button" style="display: inline-block; padding: 14px 28px;">Bring BallCODE to Your School →</a>
              </div>
            </div>
          </div>
        </section>

        
                <!-- About BallCODE Section - Enhanced with More Room -->
        <section class="about" id="about" style="padding: 120px 0; background: linear-gradient(135deg, #0C72B3 0%, #4a90e2 50%, #1a4d7a 100%); position: relative; overflow: hidden;">
          <!-- Decorative background elements -->
          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.1; background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%); pointer-events: none;"></div>
          
          <div class="container" style="position: relative; z-index: 1;">
            <div style="max-width: 1100px; margin: 0 auto; text-align: center; color: #fff; padding: 0 20px;">
              <h2 style="font-size: 3rem; margin-bottom: 2rem; color: #fff; font-weight: 700; letter-spacing: -0.02em;">About BallCODE</h2>
              <p style="font-size: 1.3rem; line-height: 1.9; margin-bottom: 3rem; color: rgba(255, 255, 255, 0.95); max-width: 900px; margin-left: auto; margin-right: auto;">
                BallCODE teaches coding, math, and AI concepts through basketball. Designed for grades 3-8, 
                we combine the excitement of basketball with hands-on STEM learning that students actually enjoy.
              </p>
              
              <!-- Clear Progression Hero -->
              <div style="background: rgba(0, 0, 0, 0.2); border-radius: 20px; padding: 3rem 2rem; margin-bottom: 4rem; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1);">
                <h3 style="font-size: 2.5rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, #FF6B35 0%, #eb6123 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700;">
                  Clear Progression
                </h3>
                <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; font-size: 1.5rem; color: #fff; margin-bottom: 1rem;">
                  <span style="font-weight: 600;">Blocks</span>
                  <span style="color: #FF6B35; font-size: 2rem;">→</span>
                  <span style="font-weight: 600;">Bridge</span>
                  <span style="color: #FF6B35; font-size: 2rem;">→</span>
                  <span style="font-weight: 600;">Python</span>
                </div>
                <p style="font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin-top: 1rem; line-height: 1.7;">
                  This pathway guides students from beginner to advanced, making coding accessible and engaging.
                </p>
              </div>
              
              <!-- Features Grid - Centered -->
              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; margin-top: 4rem; max-width: 1000px; margin-left: auto; margin-right: auto;">
                <div style="background: rgba(255, 255, 255, 0.15); padding: 2.5rem 2rem; border-radius: 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0, 0, 0, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                  <div style="font-size: 3rem; margin-bottom: 1.5rem;">📚</div>
                  <h3 style="color: #FF6B35; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 600;">Story-First Learning</h3>
                  <p style="color: rgba(255, 255, 255, 0.95); line-height: 1.7; font-size: 1.05rem;">Each book tells a basketball story that teaches coding concepts naturally through engaging narratives.</p>
                </div>
                <div style="background: rgba(255, 255, 255, 0.15); padding: 2.5rem 2rem; border-radius: 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0, 0, 0, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                  <div style="font-size: 3rem; margin-bottom: 1.5rem;">🎮</div>
                  <h3 style="color: #FF6B35; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 600;">Interactive Exercises</h3>
                  <p style="color: rgba(255, 255, 255, 0.95); line-height: 1.7; font-size: 1.05rem;">60-90 second game challenges reinforce what students learn in the story with immediate feedback.</p>
                </div>
                <div style="background: rgba(255, 255, 255, 0.15); padding: 2.5rem 2rem; border-radius: 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-8px)'; this.style.boxShadow='0 12px 32px rgba(0, 0, 0, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none';">
                  <div style="font-size: 3rem; margin-bottom: 1.5rem;">🚀</div>
                  <h3 style="color: #FF6B35; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 600;">Clear Progression</h3>
                  <p style="color: rgba(255, 255, 255, 0.95); line-height: 1.7; font-size: 1.05rem;">Blocks → Bridge → Python pathway guides students from beginner to advanced systematically.</p>
                </div>
              </div>
            </div>
          </div>
        </section>


        <!-- Contact-Section -->
        <section class="contact" id="contact">
          <div class="container">
            <form class="contact-form" name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
              <input type="hidden" name="form-name" value="contact" />
              <p style="display: none;">
                <label>Don't fill this out if you're human: <input name="bot-field" /></label>
              </p>
              <h2 class="contact-title">Get School + Parent Access Info</h2>
              <div class="contact-form-field">
                <input
                  type="text"
                  name="name"
                  id="name"
                  placeholder="Enter Your Name"
                  required
                />
              </div>
              <div class="contact-form-field">
                <input
                  type="email"
                  name="email"
                  id="email"
                  placeholder="Enter Your Email"
                  required
                />
              </div>
              <div class="contact-form-field">
                <textarea name="message" id="message" placeholder="School name (if applicable) + what you want to launch (pilot, bundle, etc.)" style="width: 100%; min-height: 120px; border-radius: 12px; padding: 16px;"></textarea>
              </div>
              <button type="submit" class="contact-form-btn">Sign Up</button>
            </form>
            
            <div class="contact-info-display" style="margin-top: 40px; text-align: center; padding: 30px 20px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; max-width: 600px; margin-left: auto; margin-right: auto;">
              <h3 style="font-size: 1.5rem; margin-bottom: 20px; color: #fff;">Get in Touch</h3>
              <div style="display: flex; flex-direction: column; gap: 15px;">
                <p style="font-size: 1.1rem; color: rgba(255, 255, 255, 0.9);">
                  <strong style="color: #FF6B35;">Email:</strong> 
                  <a href="mailto:info@ballcode.co" style="color: #0C72B3; text-decoration: none; font-weight: 500;">info@ballcode.co</a>
                </p>
                <p style="font-size: 1.1rem; color: rgba(255, 255, 255, 0.9);">
                  <strong style="color: #FF6B35;">For Schools:</strong> 
                  <a href="mailto:schools@ballcode.co" style="color: #0C72B3; text-decoration: none; font-weight: 500;">schools@ballcode.co</a>
                </p>
                <p style="font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); margin-top: 10px;">
                  We typically respond within 24 hours
                </p>
              </div>
            </div>
<div class="contact-socials">
              <a href="https://www.instagram.com/ballc0de/" class="contact-social" target="_blank" rel="noopener noreferrer">
                <img src="./assets/images/insta.png" alt="Instagram" />
              <!-- </a>
              <a href="#" class="contact-social" target="_blank" rel="noopener noreferrer">
                <img src="./assets/images/fb.png" alt="" />
              </a> -->
              <a href="https://x.com/ballc0de?lang=en" class="contact-social" target="_blank" rel="noopener noreferrer">
                <img src="./assets/images/X_Logo.png" alt="X (Twitter)" />
              </a>
              <!-- <a href="#" class="contact-social top-first" target="_blank" rel="noopener noreferrer">
                <img src="./assets/images/email.png" alt="" />
              </a> -->
              <a href="https://www.tiktok.com/@ballc0de?lang=en" class="contact-social top-second" target="_blank" rel="noopener noreferrer">
                <img src="./assets/images/TikTok-Social-Icon-Mono-Black.png" alt="TikTok" />
              </a>
            </div>
          </div>
        </section>

        <section>
          
        </section>
      </div>
    </main>

    <!-- Swiper JS - Deferred -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
    <!-- Script - Deferred for non-critical -->
    <script src="./js/script.js" defer></script>
    <script src="./js/impact-stories.js" defer></script>
    <!-- Integration Scripts for 4-Pillar Integration - Deferred -->
    <script src="./js/api-client.js" defer></script>
    <script src="./js/integration.js" defer></script>
    
    <!-- Existing Scripts - Deferred -->
    <script src="/js/measurement-tracking.js" defer></script>
</body>
</html>
