add BJJ details

D David Veksler · 1 year ago a317fdee1edcca88506dc8bdad751453803059cd
Parent: f1d97603f

1 file changed +340 −288

Diff

diff --git a/brazilian-jiu-jitsu.html b/brazilian-jiu-jitsu.html
index 76582f3..3cec232 100644
--- a/brazilian-jiu-jitsu.html
+++ b/brazilian-jiu-jitsu.html
@@ -3,52 +3,55 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Brazilian Jiu-Jitsu (BJJ) Cheatsheet</title>
-    <meta name="description" content="A comprehensive, interactive cheatsheet covering the fundamentals, positions, techniques, and concepts of Brazilian Jiu-Jitsu (BJJ). Ideal for beginners and quick reference.">
-    <meta name="keywords" content="Brazilian Jiu-Jitsu, BJJ, cheatsheet, grappling, martial arts, positions, submissions, escapes, sweeps, guard pass, takedowns, fundamentals, BJJ concepts, Gi, No-Gi, rolling, belts">
+    <title>Brazilian Jiu-Jitsu (BJJ) Cheatsheet: The Ultimate Guide</title>
+    <meta name="description" content="A comprehensive, interactive cheatsheet covering Brazilian Jiu-Jitsu (BJJ) fundamentals, positions, techniques (submissions, escapes, sweeps, passes, takedowns), concepts, etiquette, and resources. Ideal for beginners and experienced practitioners.">
+    <meta name="keywords" content="Brazilian Jiu-Jitsu, BJJ, cheatsheet, grappling, martial arts, positions, submissions, escapes, sweeps, guard pass, takedowns, fundamentals, BJJ concepts, Gi, No-Gi, rolling, belts, jiu jitsu techniques, BJJ guide, learn BJJ, BJJ basics">
     <meta name="author" content="AI Assistant (based on user input)">
 
+    <link rel="canonical" href="http://cheatsheets.davidveksler.com/brazilian-jiu-jitsu.html">
+
     <!-- Open Graph / Facebook / LinkedIn -->
-    <meta property="og:title" content="Brazilian Jiu-Jitsu (BJJ) Cheatsheet: Fundamentals & Techniques">
-    <meta property="og:description" content="Master the essentials of BJJ with this interactive cheatsheet covering core concepts, positions, submissions, escapes, and training methods.">
+    <meta property="og:title" content="Brazilian Jiu-Jitsu (BJJ) Cheatsheet: Ultimate Interactive Guide">
+    <meta property="og:description" content="Master the essentials of BJJ with this detailed, interactive cheatsheet covering core concepts, positions, submissions, escapes, training methods, and key resources including YouTube links.">
     <meta property="og:type" content="article">
-    <!-- <meta property="og:url" content="[Your URL Here]"> -->
-    <!-- <meta property="og:image" content="[Your Image URL Here]"> -->
+    <meta property="og:url" content="http://cheatsheets.davidveksler.com/brazilian-jiu-jitsu.html">
+    <!-- <meta property="og:image" content="[Your Image URL Here - e.g., BJJ related graphic]"> -->
     <!-- <meta property="og:image:alt" content="Illustration of BJJ techniques or positions"> -->
     <meta property="og:site_name" content="BJJ Cheatsheet">
     <meta property="og:locale" content="en_US">
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Brazilian Jiu-Jitsu (BJJ) Cheatsheet: Key Concepts Explained">
-    <meta name="twitter:description" content="Your quick guide to BJJ! Explore fundamentals, positions, submissions, escapes, sweeps, and more in this easy-to-use cheatsheet.">
-    <!-- <meta name="twitter:url" content="[Your URL Here]"> -->
-    <!-- <meta name="twitter:image" content="[Your Image URL Here]"> -->
+    <meta name="twitter:title" content="Brazilian Jiu-Jitsu (BJJ) Cheatsheet: Interactive Guide">
+    <meta name="twitter:description" content="Your ultimate quick guide to BJJ! Explore fundamentals, positions, submissions, escapes, sweeps, YouTube resources, and more in this easy-to-use cheatsheet.">
+    <meta name="twitter:url" content="http://cheatsheets.davidveksler.com/brazilian-jiu-jitsu.html">
+    <!-- <meta name="twitter:image" content="[Your Image URL Here - e.g., BJJ related graphic]"> -->
     <!-- <meta name="twitter:image:alt" content="Illustration of BJJ techniques or positions"> -->
 
     <!-- CSS -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Oswald:wght@400;500;600&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
     <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
-    <!-- Custom CSS (Inspired by leadership.html template) -->
+    <!-- Custom CSS -->
     <style>
         :root {
-            --font-primary: 'Lato', sans-serif;
-            --font-headings: 'Poppins', sans-serif;
-            --color-bg: #f8f9fa;
-            --color-text: #343a40;
-            --color-primary: #003366; /* BJJ Blue/Navy */
-            --color-secondary: #4a7ab8; /* Lighter blue */
+            --font-primary: 'Roboto', sans-serif;
+            --font-headings: 'Oswald', sans-serif; /* More impactful heading font */
+            --color-bg: #f4f4f4; /* Slightly off-white */
+            --color-text: #333;
+            --color-primary: #0a2e5b; /* Deeper Navy Blue */
+            --color-secondary: #3a6aa0; /* Mid Blue */
+            --color-accent: #d9a404; /* Gold/Yellow accent - like belt stripes */
             --color-card-bg: #ffffff;
-            --color-card-border: #e9ecef;
+            --color-card-border: #ddd;
             --color-link: #0d6efd;
             --color-link-hover: #0a58ca;
-            --color-expand-bg: #eef3f8; /* Lighter blue for expanded content */
-            --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.07);
-            --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.1);
+            --color-expand-bg: #eaf2fa; /* Very light blue */
+            --shadow-soft: 0 3px 8px rgba(0, 0, 0, 0.08);
+            --shadow-hover: 0 6px 15px rgba(0, 0, 0, 0.12);
         }
 
         body {
@@ -57,14 +60,16 @@
             color: var(--color-text);
             padding-top: 0;
             padding-bottom: 3rem;
-            font-size: 16.5px;
-            line-height: 1.65;
+            font-size: 16px;
+            line-height: 1.7;
         }
 
         h1, h2, h3, h4, h5, h6 {
             font-family: var(--font-headings);
             color: var(--color-primary);
-            font-weight: 600;
+            font-weight: 500; /* Oswald looks good at 500 */
+            text-transform: uppercase; /* Martial arts feel */
+            letter-spacing: 0.5px;
         }
 
         a {
@@ -77,35 +82,41 @@
             text-decoration: underline;
         }
         .small { font-size: 0.85em; }
+        .text-accent { color: var(--color-accent); }
 
         .page-header {
-            padding: 3rem 1.5rem;
+            padding: 4rem 1.5rem;
             margin-bottom: 3rem;
             text-align: center;
-            background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+            background-color: var(--color-primary);
+            /* background: linear-gradient(145deg, var(--color-primary), #1f4e83); */
             color: #fff;
-            border-bottom: 5px solid var(--color-secondary);
+            border-bottom: 6px solid var(--color-accent); /* Accent border */
         }
         .page-header h1 {
             color: #ffffff;
-            font-weight: 500;
+            font-weight: 600;
             margin-bottom: 0.75rem;
-            font-size: 2.8rem;
+            font-size: 3.2rem; /* Larger */
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 0.75rem;
+            gap: 1rem;
         }
          .page-header h1 .bi {
-            font-size: 0.9em;
+            font-size: 0.8em;
             opacity: 0.9;
+            color: var(--color-accent); /* Accent icon */
          }
         .page-header .lead {
-            color: #e9ecef;
-            font-size: 1.15rem;
-            max-width: 700px;
+            color: #e0e0e0;
+            font-size: 1.2rem;
+            max-width: 750px;
             margin-left: auto;
             margin-right: auto;
+            font-family: var(--font-primary); /* Lead uses primary font */
+            text-transform: none; /* Lead is not uppercase */
+            letter-spacing: normal;
         }
 
         .row > * { margin-bottom: 2rem; }
@@ -113,7 +124,8 @@
         .info-card {
             background-color: var(--color-card-bg);
             border: 1px solid var(--color-card-border);
-            border-radius: 0.5rem;
+            border-left: 5px solid var(--color-secondary); /* Side accent */
+            border-radius: 0.3rem;
             box-shadow: var(--shadow-soft);
             height: 100%;
             display: flex;
@@ -121,31 +133,33 @@
             transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
         }
         .info-card:hover {
-             transform: translateY(-4px);
+             transform: translateY(-5px);
              box-shadow: var(--shadow-hover);
+             border-left-color: var(--color-accent); /* Change side accent on hover */
         }
         .info-card .card-body {
-            padding: 1.75rem;
+            padding: 1.5rem 1.75rem;
             flex-grow: 1;
         }
         .info-card h5 {
             color: var(--color-primary);
-            text-align: center;
+            text-align: left; /* Align left */
             margin-bottom: 1.25rem;
-            padding-bottom: 0;
-            border-bottom: none;
-            font-weight: 600;
-            font-size: 1.15rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--color-card-border); /* Underline heading */
+            font-weight: 500;
+            font-size: 1.3rem; /* Slightly larger heading */
             display: flex;
             align-items: center;
-            justify-content: center;
+            /* justify-content: center; Remove center alignment */
             flex-wrap: wrap;
-            gap: 0.5rem;
+            gap: 0.6rem;
         }
         .info-card h5 .bi {
-            font-size: 1.2em;
+            font-size: 1.1em; /* Icon size relative to heading */
             color: var(--color-secondary);
-            order: -1;
+            /* order: -1; Remove order */
+            margin-right: 0.2rem;
         }
         .info-card h5 a { color: inherit; text-decoration: none; }
         .info-card h5 a:hover { text-decoration: underline; }
@@ -162,23 +176,26 @@
             margin-bottom: 0;
             list-style: none;
         }
-        .info-card .card-body > ul > li { /* Target only DIRECT children li */
-            margin-bottom: 0.6rem;
+        .info-card .card-body > ul > li {
+            margin-bottom: 0.7rem; /* More space between items */
             color: var(--color-text);
             position: relative;
             font-size: 0.98rem;
-            padding-left: 1.6rem;
+            padding-left: 1.8rem; /* More padding for icon */
         }
-         .info-card .card-body > ul > li::before { /* Custom bullet for direct children */
-             content: '';
+         .info-card .card-body > ul > li::before {
+             /* Use Bootstrap Icons as bullets */
+             content: "\F632"; /* Example: dot, find relevant icon like f282 check small */
+             font-family: 'bootstrap-icons';
              position: absolute;
-             left: 0.5rem;
-             top: 0.65em; /* Adjusted for potential line height changes */
-             transform: translateY(-50%);
-             width: 6px;
-             height: 6px;
-             background-color: var(--color-secondary);
-             border-radius: 50%;
+             left: 0.2rem;
+             top: 0.2em;
+             font-size: 0.9em;
+             color: var(--color-secondary);
+             /* background-color: transparent; */
+             /* border-radius: 0; */
+             width: auto; height: auto; /* Reset from previous style */
+             transform: none; /* Reset */
          }
         .info-card ul li:last-child { margin-bottom: 0; }
 
@@ -198,7 +215,7 @@
             content: none;
         }
         .expandable-content ul:not(.list-unstyled) {
-             list-style: disc;
+             list-style: disc; /* Keep standard disc for nested UL */
              padding-left: 2.5rem;
              margin-top: 0.6rem;
              margin-bottom: 0.6rem;
@@ -208,25 +225,28 @@
              margin-bottom: 0.4rem;
          }
 
-        .state-heading { /* Re-purposed for sub-headings if needed */
-             font-weight: bold;
+        .section-heading { /* Use for distinct sections within a card if needed */
+             font-family: var(--font-headings);
+             font-weight: 500;
              color: var(--color-secondary);
-             margin-top: 1rem;
-             margin-bottom: 0.4rem;
-             font-size: 0.95em;
-             display: flex;
-             align-items: center;
-             gap: 0.5rem;
+             margin-top: 1.5rem;
+             margin-bottom: 0.6rem;
+             font-size: 1rem;
+             text-transform: uppercase;
+             letter-spacing: 0.5px;
+             border-bottom: 1px solid #eee;
+             padding-bottom: 0.3rem;
         }
-        .state-heading a { font-weight: normal; }
+        .section-heading .bi { margin-right: 0.4rem; }
+
 
         /* Expandable section styles */
         .expandable-trigger {
-            border-bottom: 1px dotted var(--color-primary); /* Changed link to primary */
+            border-bottom: 1px dotted var(--color-primary);
             cursor: pointer;
             text-decoration: none;
             color: var(--color-primary);
-            font-weight: 500;
+            font-weight: 500; /* Roboto 500 */
             transition: color 0.2s, border-color 0.2s;
             display: inline-block;
         }
@@ -239,77 +259,87 @@
             font-size: 0.8em;
             margin-left: 0.2em;
             transition: transform 0.3s ease-in-out;
+            display: inline-block; /* Ensure icon is part of flow */
         }
         .expandable-trigger[aria-expanded="true"] .bi {
             transform: rotate(180deg);
         }
+         .expandable-trigger .bi-youtube { /* Style YouTube icon differently */
+             color: #FF0000; /* YouTube Red */
+             font-size: 0.9em;
+             margin-left: 0.3em;
+             vertical-align: baseline;
+             transform: none !important; /* Prevent rotation */
+         }
 
         .expandable-content {
             background-color: var(--color-expand-bg);
             border: 1px solid var(--color-card-border);
             border-radius: 0.3rem;
-            padding: 0.8rem 1.2rem;
+            padding: 1rem 1.2rem; /* More padding */
             margin-top: 0.5rem;
-            margin-bottom: 0.8rem; /* Ensure space before next list item */
+            margin-bottom: 0.8rem;
             font-size: 0.95em;
-            line-height: 1.55;
-            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
+            line-height: 1.6;
+            box-shadow: inset 0 1px 4px rgba(0,0,0,0.06);
         }
         .expandable-content p:last-child { margin-bottom: 0; }
-        .expandable-content a { font-weight: 500; }
+        .expandable-content a { font-weight: 500; } /* Roboto 500 */
 
         footer {
-            padding: 2.5rem 0;
+            padding: 3rem 0 2rem 0;
             font-size: 0.9em;
-            margin-top: 3rem;
+            margin-top: 4rem;
             text-align: center;
             color: #6c757d;
             border-top: 1px solid var(--color-card-border);
         }
         footer a { color: var(--color-secondary); }
         footer a:hover { color: var(--color-primary); }
+        footer .bi { margin-right: 0.2em; } /* Icon spacing in footer */
     </style>
 </head>
 <body>
 
     <header class="page-header">
         <div class="container">
-            <h1 class="display-5"><i class="bi bi-universal-access-circle"></i> Brazilian Jiu-Jitsu Cheatsheet</h1>
-            <p class="lead">A Quick Guide to Key Concepts, Positions, Techniques, and Principles of "The Gentle Art".</p>
+            <h1><i class="bi bi-diagram-2-fill"></i> Brazilian Jiu-Jitsu Cheatsheet</h1>
+            <p class="lead">Your comprehensive guide to the core concepts, positions, techniques, and principles of "The Gentle Art". Navigate the essentials of BJJ from white belt basics to advanced concepts.</p>
         </div>
     </header>
 
     <div class="container">
         <div class="row">
 
-            <!-- Card: Introduction & Core Concepts -->
+            <!-- Card: Intro & Core Concepts -->
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-info-circle"></i> What is BJJ & Core Concepts</h5>
-                        <p class="card-text">BJJ is a grappling-based martial art focused on ground fighting and submissions, emphasizing leverage and technique over strength.</p>
+                        <h5><i class="bi bi-lightbulb-fill"></i> Intro & Core Concepts</h5>
+                        <p class="card-text">BJJ is a grappling art focused on ground control and submissions, famously using leverage and technique to overcome size and strength.</p>
                         <ul>
-                            <li><strong>Goal:</strong> Control & Submit opponent via joint locks or chokes.</li>
-                            <li>
-                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-concept-pos" role="button" aria-expanded="false" aria-controls="collapse-concept-pos"><strong>Position Before Submission</strong> <i class="bi bi-chevron-down"></i></a>
+                            <li><strong>Origin:</strong> Evolved from Kodokan Judo in Brazil (Gracie family).</li>
+                            <li><strong>Goal:</strong> Achieve dominant position, control, and submit opponent (joint lock/choke).</li>
+                            <li><i class="bi bi-check-circle-fill text-success me-1"></i><strong>Above the Line:</strong> Learning, Open, Curious (Effective BJJ).</li>
+                            <li><i class="bi bi-x-octagon-fill text-danger me-1"></i><strong>Below the Line:</strong> Right, Defensive, Closed (Ineffective/Stagnant BJJ).</li>
+                             <li>
+                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-concept-pos" role="button" aria-expanded="false" aria-controls="collapse-concept-pos"><strong>Position > Submission</strong> <i class="bi bi-chevron-down"></i></a>
                             </li>
                             <div class="collapse expandable-content" id="collapse-concept-pos">
-                                <p>Establish a dominant position (like Mount or Back Control) before attempting to finish the fight. Control is paramount.</p>
+                                <p>The fundamental hierarchy: Secure a dominant position (e.g., Mount, Back Control) *before* aggressively hunting for the submission. Control prevents escapes and creates openings.</p>
                             </div>
                              <li>
-                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-concept-lev" role="button" aria-expanded="false" aria-controls="collapse-concept-lev"><strong>Leverage Over Strength</strong> <i class="bi bi-chevron-down"></i></a>
+                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-concept-lev" role="button" aria-expanded="false" aria-controls="collapse-concept-lev"><strong>Leverage > Strength</strong> <i class="bi bi-chevron-down"></i></a>
                             </li>
                              <div class="collapse expandable-content" id="collapse-concept-lev">
-                                <p>Using technique, body mechanics, and leverage allows smaller individuals to overcome larger, stronger opponents.</p>
+                                <p>BJJ's cornerstone. Using angles, body mechanics, and timing to apply force efficiently, allowing smaller practitioners to manage larger opponents. Think physics, not just muscle.</p>
                             </div>
                             <li>
                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-concept-bps" role="button" aria-expanded="false" aria-controls="collapse-concept-bps"><strong>Base, Posture, Structure</strong> <i class="bi bi-chevron-down"></i></a>
                             </li>
                             <div class="collapse expandable-content" id="collapse-concept-bps">
-                                <p>Fundamental principles for balance (Base), spinal alignment for defense/strength (Posture), and using limbs effectively as frames/levers (Structure).</p>
+                                <p><strong>Base:</strong> Stable connection to the ground, hard to move. <strong>Posture:</strong> Strong spinal alignment (especially in guard) to resist control/attacks. <strong>Structure:</strong> Using limbs as effective frames (to create space) or levers (to apply force/control).</p>
                             </div>
-                             <li><strong>Frames & Levers:</strong> Using limbs to create space or apply force.</li>
-                             <li><strong>Timing & Momentum:</strong> Using opponent's energy against them.</li>
                         </ul>
                     </div>
                 </div>
@@ -320,39 +350,27 @@
                 <div class="info-card">
                     <div class="card-body">
                         <h5><i class="bi bi-arrows-move"></i> Fundamental Movements</h5>
-                        <p class="card-text">Essential body movements for escaping, creating space, defending, and attacking.</p>
+                        <p class="card-text">The building blocks of all BJJ techniques. Master these for effective transitions, escapes, and attacks.</p>
                         <ul>
                              <li>
                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-move-shrimp" role="button" aria-expanded="false" aria-controls="collapse-move-shrimp"><strong>Shrimping (Hip Escape)</strong> <i class="bi bi-chevron-down"></i></a>
+                                <a href="https://www.youtube.com/results?search_query=bjj+shrimp+escape+tutorial" target="_blank" rel="noopener noreferrer" class="expandable-trigger"><i class="bi bi-youtube"></i></a>
                              </li>
                              <div class="collapse expandable-content" id="collapse-move-shrimp">
-                                <p>Moving hips away laterally to create space, crucial for escaping pins and retaining guard.</p>
+                                <p>Moving hips away laterally to create space. Essential for escaping pins (Mount, Side Control) and guard retention.</p>
                              </div>
                              <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-move-bridge" role="button" aria-expanded="false" aria-controls="collapse-move-bridge"><strong>Bridging</strong> <i class="bi bi-chevron-down"></i></a>
+                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-move-bridge" role="button" aria-expanded="false" aria-controls="collapse-move-bridge"><strong>Bridging (Upa)</strong> <i class="bi bi-chevron-down"></i></a>
+                                  <a href="https://www.youtube.com/results?search_query=bjj+bridge+escape+upa" target="_blank" rel="noopener noreferrer" class="expandable-trigger"><i class="bi bi-youtube"></i></a>
                              </li>
                              <div class="collapse expandable-content" id="collapse-move-bridge">
-                                 <p>Explosive hip lift to disrupt opponent's base, used to escape Mount, Side Control, etc.</p>
+                                 <p>Explosive hip lift to disrupt opponent's base, create space, or initiate reversals (especially from Mount).</p>
                              </div>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-move-post" role="button" aria-expanded="false" aria-controls="collapse-move-post"><strong>Posting</strong> <i class="bi bi-chevron-down"></i></a>
-                            </li>
-                            <div class="collapse expandable-content" id="collapse-move-post">
-                                <p>Using hands, feet, or elbows on the mat or opponent to maintain balance and prevent being swept or controlled.</p>
-                            </div>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-move-sprawl" role="button" aria-expanded="false" aria-controls="collapse-move-sprawl"><strong>Sprawl</strong> <i class="bi bi-chevron-down"></i></a>
-                             </li>
-                             <div class="collapse expandable-content" id="collapse-move-sprawl">
-                                 <p>Defending takedowns (esp. leg attacks) by thrusting hips back and dropping weight onto the opponent.</p>
-                             </div>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-move-shoot" role="button" aria-expanded="false" aria-controls="collapse-move-shoot"><strong>Shoot</strong> <i class="bi bi-chevron-down"></i></a>
-                            </li>
-                             <div class="collapse expandable-content" id="collapse-move-shoot">
-                                 <p>Lowering your level and penetrating forward quickly to initiate takedowns like the Single or Double Leg.</p>
-                             </div>
-                             <li><strong>Technical Stand-up:</strong> Safely getting up from the ground while protecting yourself.</li>
+                             <li><strong>Posting:</strong> Using limbs on mat/opponent for balance.</li>
+                             <li><strong>Sprawl:</strong> Defending takedowns by driving hips back/down. <a href="https://www.youtube.com/results?search_query=bjj+sprawl+tutorial" target="_blank" rel="noopener noreferrer" class="expandable-trigger"><i class="bi bi-youtube"></i></a></li>
+                             <li><strong>Technical Stand-up:</strong> Safely rising from ground while protecting. <a href="https://www.youtube.com/results?search_query=bjj+technical+stand+up" target="_blank" rel="noopener noreferrer" class="expandable-trigger"><i class="bi bi-youtube"></i></a></li>
+                             <li><strong>Rolling/Turning:</strong> Forward/backward shoulder rolls, Granby roll for defense/transitions.</li>
+                             <li><strong>Pummeling:</strong> Fighting for underhook control in clinch/guard.</li>
                         </ul>
                     </div>
                 </div>
@@ -362,17 +380,17 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-diagram-3-fill"></i> Positional Hierarchy (Top > Bottom)</h5>
-                        <p class="card-text">Dominant positions allow control and attack opportunities. Being on top is generally advantageous.</p>
-                        <ol style="list-style: decimal; padding-left: 1.5rem;">
-                             <li><strong>Back Mount / Back Control:</strong> Most dominant; opponent can't see attacks.</li>
-                             <li><strong>Mount (Full Mount):</strong> Sitting on opponent's torso, controlling hips.</li>
-                             <li><strong>Knee-on-Belly:</strong> High pressure, mobile, good transitions.</li>
-                             <li><strong>Side Control:</strong> Controlling from the side (chest-to-chest, Kesa Gatame, North-South variations).</li>
-                             <li><strong>Guard (Top):</strong> Standing/kneeling while opponent uses legs (needs passing).</li>
-                             <li><strong>Guard (Bottom):</strong> Controlling opponent from your back using legs (aim to sweep/submit).</li>
-                             <li><strong>Turtle:</strong> Defensive posture on hands/knees.</li>
-                             <li class="small"><em>(Bottom positions like Bottom Mount indicate disadvantage)</em></li>
+                        <h5><i class="bi bi-diagram-3-fill"></i> Positional Hierarchy</h5>
+                        <p class="card-text">Control leads to submissions. Understand the common positions from most to least dominant (generally for the top player).</p>
+                        <ol style="list-style: none; padding-left: 0;">
+                             <li><span class="text-accent fw-bold">1. Back Mount / Back Control:</span> <i class="bi bi-shield-lock-fill text-success"></i> Highest control/attack potential. Opponent can't see.</li>
+                             <li><span class="text-accent fw-bold">2. Mount (Full Mount):</span> <i class="bi bi-person-check-fill text-success"></i> Dominant chest-on-chest, controls hips.</li>
+                             <li><span class="text-accent fw-bold">3. Knee-on-Belly:</span> <i class="bi bi-pin-map-fill text-warning"></i> High pressure, mobile, good for transitions.</li>
+                             <li><span class="text-accent fw-bold">4. Side Control:</span> <i class="bi bi-people-fill text-info"></i> Stable control from side (variations: Kesa Gatame, North-South).</li>
+                             <li><span class="text-accent fw-bold">5. Guard (Top):</span> <i class="bi bi-person-up text-secondary"></i> Must pass opponent's legs.</li>
+                             <li><span class="text-accent fw-bold">6. Guard (Bottom):</span> <i class="bi bi-person-down text-secondary"></i> Using legs for control; aim to sweep/submit.</li>
+                             <li><span class="text-accent fw-bold">7. Turtle:</span> <i class="bi bi-shield-exclamation text-danger"></i> Defensive shell, vulnerable back exposure.</li>
+                             <li class="small fst-italic mt-2">Note: Being on the bottom of Mount/Side/etc., means you are in a disadvantageous position needing escape.</li>
                         </ol>
                     </div>
                 </div>
@@ -382,35 +400,24 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-shield-shaded"></i> Guards (Bottom Position)</h5>
-                        <p class="card-text">Using legs from your back to control the opponent, prevent passes, set up sweeps, or submit.</p>
+                        <h5><i class="bi bi-shield-shaded"></i> The Guard (Bottom)</h5>
+                        <p class="card-text">Your primary defensive and offensive hub when on your back. Use legs to control distance, prevent passes, sweep, or submit.</p>
                         <ul>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-guard-closed" role="button" aria-expanded="false" aria-controls="collapse-guard-closed"><strong>Closed Guard</strong> <i class="bi bi-chevron-down"></i></a>
-                            </li>
-                             <div class="collapse expandable-content" id="collapse-guard-closed">
-                                <p>Legs locked around opponent's torso. Good control, many attacks/sweeps.</p>
-                            </div>
-                            <li>
-                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-guard-half" role="button" aria-expanded="false" aria-controls="collapse-guard-half"><strong>Half Guard</strong> <i class="bi bi-chevron-down"></i></a>
-                            </li>
-                             <div class="collapse expandable-content" id="collapse-guard-half">
-                                <p>Controlling one of the opponent's legs between yours. Can be defensive or offensive.</p>
-                            </div>
-                            <li>
-                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-guard-bfly" role="button" aria-expanded="false" aria-controls="collapse-guard-bfly"><strong>Butterfly Guard</strong> <i class="bi bi-chevron-down"></i></a>
-                            </li>
-                             <div class="collapse expandable-content" id="collapse-guard-bfly">
-                                <p>Using feet ("hooks") on the inside of opponent's thighs, often seated. Good for sweeps.</p>
-                            </div>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-guard-spider" role="button" aria-expanded="false" aria-controls="collapse-guard-spider"><strong>Spider Guard (Low/High)</strong> <i class="bi bi-chevron-down"></i></a>
-                             </li>
-                              <div class="collapse expandable-content" id="collapse-guard-spider">
-                                <p>Using feet on opponent's biceps/shoulders/hips with sleeve grips (Gi). Controls posture and distance.</p>
+                             <li><a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-guard-closed" role="button" aria-expanded="false" aria-controls="collapse-guard-closed"><strong>Closed Guard</strong> <i class="bi bi-chevron-down"></i></a>: Legs locked. Strong control.</li>
+                             <div class="collapse expandable-content" id="collapse-guard-closed"><p>Classic guard. Controls posture well, many high-percentage attacks (armbars, triangles, sweeps).</p></div>
+                             <li><a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-guard-open" role="button" aria-expanded="false" aria-controls="collapse-guard-open"><strong>Open Guard</strong> <i class="bi bi-chevron-down"></i></a>: Legs unlocked. More dynamic.</li>
+                             <div class="collapse expandable-content" id="collapse-guard-open"><p>A family of guards where legs aren't locked. Requires active feet/legs to manage distance and angles. Includes:</p>
+                                <ul style="list-style: square;">
+                                    <li><strong>Spider:</strong> Feet on biceps/hips, sleeve grips (Gi).</li>
+                                    <li><strong>Butterfly:</strong> Feet hooks inside thighs (seated/supine).</li>
+                                    <li><strong>De La Riva / Reverse DLR:</strong> One leg hooks opponent's leg.</li>
+                                    <li><strong>Lasso:</strong> Leg wraps around opponent's arm (Gi).</li>
+                                </ul>
                             </div>
-                            <li><strong>Open Guard:</strong> General term for guards where legs aren't locked (includes Spider, De La Riva, Lasso etc.).</li>
+                             <li><a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-guard-half" role="button" aria-expanded="false" aria-controls="collapse-guard-half"><strong>Half Guard</strong> <i class="bi bi-chevron-down"></i></a>: Controlling one leg.</li>
+                             <div class="collapse expandable-content" id="collapse-guard-half"><p>Trapping one of the opponent's legs. Can be defensive (survival) or offensive (sweeps/back takes). Variations: Deep Half, Z-Guard, Lockdown.</p></div>
                         </ul>
+                         <a href="https://www.youtube.com/results?search_query=bjj+guard+fundamentals" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary mt-2"><i class="bi bi-youtube"></i> Guard Concepts</a>
                     </div>
                 </div>
             </div>
@@ -419,16 +426,27 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-sign-turn-right-fill"></i> Guard Passing (Top Position)</h5>
-                        <p class="card-text">Techniques to get around the opponent's legs (guard) to achieve a more dominant position like Side Control or Mount.</p>
+                        <h5><i class="bi bi-sign-turn-right-fill"></i> Guard Passing (Top)</h5>
+                        <p class="card-text">Navigating past the opponent's legs (guard) to secure a dominant pin like Side Control or Mount.</p>
                         <ul>
-                            <li><strong>Straight Pass / Knee Slice:</strong> Cutting one knee through the guard while controlling legs/hips.</li>
-                            <li><strong>Cross Pass / Cross Knee:</strong> Passing across the opponent's body, often blocking the far hip.</li>
-                            <li><strong>Stack Pass:</strong> Compressing/stacking the opponent's legs towards their head.</li>
-                            <li><strong>Bull Fighter / Toreando Pass:</strong> Controlling both legs/pants and steering them aside like a matador.</li>
-                            <li><strong>Arm & Leg Pass / Leg Drag:</strong> Controlling an arm while dragging one leg across the opponent's body.</li>
-                             <li><strong>Double Under Pass:</strong> Scooping both arms under the opponent's legs to lift and pass.</li>
+                            <li><strong>Pressure Passing:</strong> Staying close, using weight and control grips.
+                                <ul style="list-style: none; padding-left: 1rem;">
+                                    <li><i class="bi bi-dot"></i> Knee Slice / Cut Pass</li>
+                                    <li><i class="bi bi-dot"></i> Over-Under Pass</li>
+                                    <li><i class="bi bi-dot"></i> Double Under Pass</li>
+                                    <li><i class="bi bi-dot"></i> Stack Pass</li>
+                                </ul>
+                            </li>
+                             <li><strong>Speed/Dynamic Passing:</strong> Using movement, redirection, and distance.
+                                 <ul style="list-style: none; padding-left: 1rem;">
+                                    <li><i class="bi bi-dot"></i> Toreando / Bullfighter Pass</li>
+                                    <li><i class="bi bi-dot"></i> Leg Drag Pass</li>
+                                    <li><i class="bi bi-dot"></i> X-Pass</li>
+                                </ul>
+                            </li>
+                             <li><strong>Key Principles:</strong> Control grips (legs/hips/upper body), break posture, manage distance, clear leg lines.</li>
                         </ul>
+                         <a href="https://www.youtube.com/results?search_query=bjj+guard+passing+concepts" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary mt-2"><i class="bi bi-youtube"></i> Passing Concepts</a>
                     </div>
                 </div>
             </div>
@@ -438,26 +456,34 @@
                 <div class="info-card">
                     <div class="card-body">
                         <h5><i class="bi bi-arrow-repeat"></i> Sweeps (From Guard)</h5>
-                        <p class="card-text">Techniques used from a bottom guard position to reverse the situation and get on top.</p>
+                        <p class="card-text">Reversing the position from bottom guard to achieve a top position. Off-balancing is key.</p>
                         <ul>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-sweep-scissor" role="button" aria-expanded="false" aria-controls="collapse-sweep-scissor"><strong>Scissor Sweep</strong> <i class="bi bi-chevron-down"></i></a>
-                             </li>
-                              <div class="collapse expandable-content" id="collapse-sweep-scissor">
-                                <p>From Closed Guard, using legs in a scissoring motion to off-balance and reverse.</p>
-                            </div>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-sweep-hip" role="button" aria-expanded="false" aria-controls="collapse-sweep-hip"><strong>Hip Bump Sweep</strong> <i class="bi bi-chevron-down"></i></a>
+                             <li><strong>From Closed Guard:</strong>
+                                <ul style="list-style: none; padding-left: 1rem;">
+                                    <li><i class="bi bi-dot"></i> Scissor Sweep</li>
+                                    <li><i class="bi bi-dot"></i> Hip Bump Sweep</li>
+                                    <li><i class="bi bi-dot"></i> Flower/Pendulum Sweep</li>
+                                </ul>
                              </li>
-                              <div class="collapse expandable-content" id="collapse-sweep-hip">
-                                <p>From Closed Guard, sitting up and bumping opponent's base with your hip while controlling an arm.</p>
-                            </div>
-                            <li><strong>Flower / Pendulum Sweep:</strong> Using leg momentum like a pendulum to sweep from Closed Guard.</li>
-                            <li><strong>Butterfly Sweep:</strong> Lifting with butterfly hooks while controlling upper body.</li>
-                            <li><strong>Cowboy Sweep:</strong> Specific sweep involving particular grips/leg actions (name varies).</li>
-                            <li><strong>Wind Mill Sweep:</strong> Often from open guard, using circular leg motions.</li>
-                            <li><strong>Ankle Pick / Ankle Hip / Ankle Knee Sweeps:</strong> Initiated by controlling the ankle/leg.</li>
+                            <li><strong>From Open Guard:</strong>
+                                <ul style="list-style: none; padding-left: 1rem;">
+                                    <li><i class="bi bi-dot"></i> Butterfly Sweep (Hook Sweep)</li>
+                                    <li><i class="bi bi-dot"></i> Tripod Sweep</li>
+                                    <li><i class="bi bi-dot"></i> Sickle Sweep</li>
+                                    <li><i class="bi bi-dot"></i> De La Riva Sweeps</li>
+                                    <li><i class="bi bi-dot"></i> Spider Guard Sweeps</li>
+                                </ul>
+                            </li>
+                             <li><strong>From Half Guard:</strong>
+                                <ul style="list-style: none; padding-left: 1rem;">
+                                    <li><i class="bi bi-dot"></i> Old School / Plan B Sweep</li>
+                                    <li><i class="bi bi-dot"></i> John Wayne Sweep</li>
+                                    <li><i class="bi bi-dot"></i> Deep Half Sweeps</li>
+                                </ul>
+                            </li>
+                             <li><strong>Core Idea:</strong> Disrupt base, elevate hips, create angle, use leverage.</li>
                         </ul>
+                         <a href="https://www.youtube.com/results?search_query=bjj+sweep+fundamentals" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary mt-2"><i class="bi bi-youtube"></i> Sweep Concepts</a>
                     </div>
                 </div>
             </div>
@@ -466,25 +492,28 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-lock-fill"></i> Submissions (Finishes)</h5>
-                        <p class="card-text">Techniques forcing an opponent to "tap out" (submit) via chokes or joint locks.</p>
-                        <div class="state-heading">Chokes (Restricting Blood/Air):</div>
+                        <h5><i class="bi bi-explicit-fill"></i> Submissions (Finishes)</h5>
+                        <p class="card-text">Techniques forcing submission ("Tap") via chokes (blood/air restriction) or joint locks (hyperextension/rotation).</p>
+                        <div class="section-heading"><i class="bi bi-lungs-fill"></i> Chokes</div>
                         <ul>
-                            <li><strong>Rear Naked Choke (RNC):</strong> From Back Control.</li>
-                            <li><strong>Guillotine Choke:</strong> Front headlock choke.</li>
-                            <li><strong>Triangle Choke:</strong> Using legs around neck and one arm.</li>
-                            <li><strong>Cross Collar Choke:</strong> Using Gi collars (from Mount/Guard).</li>
-                            <li><strong>Bow and Arrow Choke:</strong> From Back Control using collar and leg.</li>
+                            <li><strong>RNC (Rear Naked Choke):</strong> From Back. High percentage.</li>
+                            <li><strong>Guillotine:</strong> Front Headlock. Standing or ground.</li>
+                            <li><strong>Triangle Choke:</strong> Legs around neck/arm. From Guard/Mount.</li>
+                            <li><strong>Arm Triangle / Head & Arm Choke:</strong> From Top (Side/Mount).</li>
+                            <li><strong>Cross Collar Chokes (Gi):</strong> From Mount/Guard. X-Choke, Sliding Collar.</li>
+                            <li><strong>Bow & Arrow Choke (Gi):</strong> From Back. Powerful.</li>
                         </ul>
-                         <div class="state-heading">Joint Locks (Hyperextending/Twisting):</div>
+                         <div class="section-heading"><i class="bi bi-bone"></i> Joint Locks</div>
                          <ul>
-                             <li><strong>Arm Bar (Juji Gatame):</strong> Hyperextending the elbow.</li>
-                             <li><strong>Kimura:</strong> Figure-four grip shoulder lock.</li>
-                             <li><strong>Americana / Key Lock:</strong> Shoulder lock, often from Mount/Side Control.</li>
-                             <li><strong>Omoplata:</strong> Shoulder lock using legs from Guard.</li>
-                             <li><strong>Ankle Lock / Straight Foot Lock:</strong> Basic leg lock.</li>
-                             <li class="small"><em>(Others: Heel Hook, Kneebar, Toe Hold - often advanced)</em></li>
+                             <li><strong>Armbar (Juji Gatame):</strong> Elbow hyperextension. Versatile.</li>
+                             <li><strong>Kimura:</strong> Figure-four shoulder lock (internal rotation).</li>
+                             <li><strong>Americana (Keylock):</strong> Figure-four shoulder lock (external rotation).</li>
+                             <li><strong>Omoplata:</strong> Shoulder lock using legs vs arm/shoulder.</li>
+                             <li><strong>Straight Ankle Lock:</strong> Basic leg lock (foot hyperextension).</li>
+                             <li><strong>Kneebar:</strong> Knee hyperextension.</li>
+                             <li class="small fst-italic">Advanced: Heel Hooks, Toe Holds, Wrist Locks.</li>
                         </ul>
+                        <a href="https://www.youtube.com/results?search_query=bjj+high+percentage+submissions" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary mt-2"><i class="bi bi-youtube"></i> Submission Ideas</a>
                     </div>
                 </div>
             </div>
@@ -493,31 +522,25 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-escape"></i> Escapes (Getting Out)</h5>
-                        <p class="card-text">Techniques to get out of disadvantageous positions or submission attempts.</p>
+                        <h5><i class="bi bi-escape"></i> Escapes & Defense</h5>
+                        <p class="card-text">Surviving bad positions and submission threats. Defense is paramount for longevity and learning.</p>
+                         <div class="section-heading"><i class="bi bi-shield-x"></i> Positional Escapes</div>
                         <ul>
-                            <li><strong>Mount Escapes:</strong> Using Bridge (upa) and Shrimp variations.</li>
-                            <li><strong>Side Control Escapes:</strong> Using Shrimping, framing, turning in/away.</li>
-                            <li><strong>Back Control Escapes:</strong> Hand fighting, turning into opponent.</li>
-                            <li><strong>Knee-on-Belly Escape:</strong> Shrimping, framing the knee away.</li>
-                            <li><strong>Head Lock Escapes:</strong> Critical for self-defense and basic BJJ.</li>
-                            <li><strong>Arm Bar Escape:</strong> Stacking, pulling elbow out, turning.</li>
-                            <li><strong>Triangle Escape:</strong> Posturing up, controlling arm/head.</li>
-                            <li><strong>Guillotine Escape:</strong> Posturing, creating space, hand fighting.</li>
-                             <li><strong>Ankle Lock Escape:</strong> "Booting" the foot, turning.</li>
-                             <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-escape-working" role="button" aria-expanded="false" aria-controls="#collapse-escape-working"><strong>Working Position Escapes</strong> <i class="bi bi-chevron-down"></i></a>
-                             </li>
-                             <div class="collapse expandable-content" id="collapse-escape-working">
-                                 <p>General term likely referring to escaping the core dominant positions (Mount, Side, Back) by regaining guard or creating space to stand up.</p>
-                             </div>
-                              <li>
-                                 <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-escape-shoot" role="button" aria-expanded="false" aria-controls="#collapse-escape-shoot"><strong>Shoot (Escape Context)</strong> <i class="bi bi-chevron-down"></i></a>
-                             </li>
-                              <div class="collapse expandable-content" id="collapse-escape-shoot">
-                                 <p>Sometimes used explosively to create scrambles or transitions out of bad spots, potentially leading to a takedown or reversal.</p>
-                             </div>
+                            <li><strong>Mount Escape:</strong> Upa (Bridge & Roll), Elbow-Knee Escape (Shrimping).</li>
+                            <li><strong>Side Control Escape:</strong> Reguarding (Shrimp to Guard), Framing & Turning, Ghost Escape.</li>
+                            <li><strong>Back Control Escape:</strong> Hand/Grip Fighting, Turning In, Scooting Down.</li>
+                            <li><strong>Knee-on-Belly Escape:</strong> Framing knee, Shrimping away.</li>
+                            <li><strong>Turtle Defense:</strong> Protecting neck/back, looking for reguard/standup.</li>
+                        </ul>
+                         <div class="section-heading"><i class="bi bi-shield-slash"></i> Submission Defense</div>
+                         <ul>
+                             <li><strong>Armbar Defense:</strong> Stacking, Hitchhiker Escape, Grip Breaks.</li>
+                             <li><strong>Triangle Defense:</strong> Posture Up, Angle Change, Pass Arm Across.</li>
+                             <li><strong>Choke Defense:</strong> Protect Neck ("Chin Tuck"), Hand Fighting, Creating Space.</li>
+                             <li><strong>Kimura/Americana Defense:</strong> Straighten Arm, Grab Own Belt/Thigh, Turn Body.</li>
+                             <li><strong>Leg Lock Defense:</strong> "Booting" Foot, Turning Correct Direction, Clearing Knee Line.</li>
                         </ul>
+                         <a href="https://www.youtube.com/results?search_query=bjj+escape+fundamentals" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary mt-2"><i class="bi bi-youtube"></i> Escape Concepts</a>
                     </div>
                 </div>
             </div>
@@ -526,90 +549,119 @@
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-person-down"></i> Takedowns (Getting to the Ground)</h5>
-                        <p class="card-text">Techniques to bring a standing opponent to the mat. BJJ incorporates Wrestling and Judo takedowns.</p>
+                        <h5><i class="bi bi-person-down"></i> Takedowns & Standing</h5>
+                        <p class="card-text">Bringing the fight to the ground. BJJ utilizes techniques from Wrestling, Judo, and Sambo.</p>
                         <ul>
-                            <li><strong>Single Leg Takedown:</strong> Attacking and controlling one leg.</li>
-                            <li><strong>Double Leg Takedown:</strong> Attacking and controlling both legs.</li>
-                            <li>
-                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-td-osoto" role="button" aria-expanded="false" aria-controls="collapse-td-osoto"><strong>Osoto Gari</strong> <i class="bi bi-chevron-down"></i></a>
-                             </li>
-                              <div class="collapse expandable-content" id="collapse-td-osoto">
-                                <p>Major Outer Reaping; a common Judo throw involving reaping the opponent's leg from the outside.</p>
-                             </div>
-                            <li><strong>Leg Pick / Ankle Pick:</strong> Picking the ankle to off-balance.</li>
-                            <li><strong>Hip Toss (e.g., O Goshi):</strong> Using hip leverage to throw.</li>
-                            <li><strong>Foot Sweeps (e.g., De Ashi Barai):</strong> Sweeping the opponent's foot as they step.</li>
-                             <li><strong>Body Lock Takedown:</strong> Clinching around the torso to take down.</li>
+                            <li><strong>Wrestling Based:</strong>
+                                <ul style="list-style: none; padding-left: 1rem;">
+                                    <li><i class="bi bi-dot"></i> Double Leg Takedown</li>
+                                    <li><i class="bi bi-dot"></i> Single Leg Takedown (various finishes)</li>
+                                    <li><i class="bi bi-dot"></i> High Crotch Takedown</li>
+                                    <li><i class="bi bi-dot"></i> Ankle Pick</li>
+                                </ul>
+                            </li>
+                             <li><strong>Judo Based:</strong>
+                                <ul style="list-style: none; padding-left: 1rem;">
+                                    <li><i class="bi bi-dot"></i> Osoto Gari (Major Outer Reaping)</li>
+                                    <li><i class="bi bi-dot"></i> O Goshi (Major Hip Throw)</li>
+                                    <li><i class="bi bi-dot"></i> Seoi Nage (Shoulder Throw)</li>
+                                    <li><i class="bi bi-dot"></i> Uchi Mata (Inner Thigh Throw)</li>
+                                    <li><i class="bi bi-dot"></i> Foot Sweeps (De Ashi Barai, etc.)</li>
+                                </ul>
+                            </li>
+                             <li><strong>Guard Pulling:</strong> Intentionally going to a guard position from standing.</li>
+                             <li><strong>Clinch Work:</strong> Upper body control (Underhooks, Overhooks, Body Lock).</li>
                         </ul>
+                         <a href="https://www.youtube.com/results?search_query=bjj+takedown+fundamentals" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary mt-2"><i class="bi bi-youtube"></i> Takedown Basics</a>
                     </div>
                 </div>
             </div>
 
-            <!-- Card: Guard Breaks -->
+             <!-- Card: Training, Belts, Etiquette -->
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-key-fill"></i> Guard Breaks (Opening Closed Guard)</h5>
-                        <p class="card-text">Techniques used by the top player to open the opponent's locked legs (Closed Guard).</p>
+                        <h5><i class="bi bi-trophy-fill"></i> Training & Progression</h5>
+                         <p class="card-text">Learning structure, advancement, and gym culture.</p>
+                         <div class="section-heading"><i class="bi bi-clipboard-data"></i> Training Methods</div>
                         <ul>
-                             <li><strong>Posture & Base:</strong> Maintaining strong posture is key.</li>
-                             <li><strong>Palm Chest / Elbow Knee:</strong> Using hand/elbow pressure inside opponent's thigh/knee.</li>
-                             <li><strong>Hands in Hip:</strong> Posturing up, placing hands on opponent's hips to create distance.</li>
-                             <li><strong>Stack Break:</strong> Driving weight forward to stack the opponent, forcing legs open.</li>
-                             <li><strong>Standing Break:</strong> Standing up inside the guard to use gravity and leverage.</li>
-                             <li><strong>Standing Knee Break:</strong> While standing, driving a knee into the opponent's tailbone or thigh to split legs.</li>
+                            <li><strong>Warm-ups:</strong> Movement drills (shrimping, bridging etc.).</li>
+                            <li><strong>Technique Drilling:</strong> Repetitive practice with partner.</li>
+                            <li><strong>Positional Sparring:</strong> Rolling from specific spots (Guard Pass, Mount Escape etc.).</li>
+                             <li><strong>Rolling (Sparring):</strong> Live grappling applying techniques.</li>
+                        </ul>
+                         <div class="section-heading"><i class="bi bi-gem"></i> Belt System (Adult)</div>
+                         <ul style="columns: 2;">
+                             <li><i class="bi bi-square-fill" style="color: white; border: 1px solid black;"></i> White</li>
+                             <li><i class="bi bi-square-fill" style="color: blue;"></i> Blue</li>
+                             <li><i class="bi bi-square-fill" style="color: purple;"></i> Purple</li>
+                             <li><i class="bi bi-square-fill" style="color: brown;"></i> Brown</li>
+                             <li><i class="bi bi-square-fill" style="color: black;"></i> Black</li>
+                             <li><i class="bi bi-square-fill" style="color: red;"></i> Red (Coral/Red)</li>
+                         </ul>
+                         <p class="small">Stripes (0-4) mark progress. Time varies greatly (avg. 8-15 yrs to Black).</p>
+
+                         <div class="section-heading"><i class="bi bi-journal-check"></i> Gym Etiquette</div>
+                         <ul>
+                            <li><strong>Hygiene FIRST:</strong> Clean Gi/No-Gi gear *every* time. Clean body, trim nails.</li>
+                            <li><strong>Safety:</strong> Tap early/often. Be aware of space/partners. No shoes on mat.</li>
+                            <li><strong>Respect:</strong> Instructor, partners (esp. higher belts), bowing, listening.</li>
+                            <li><strong>Punctuality & Focus:</strong> Be on time, minimize chatter during instruction.</li>
+                            <li><strong>Health:</strong> Don't train sick or with skin infections.</li>
                         </ul>
                     </div>
                 </div>
             </div>
 
-            <!-- Card: Training & Progression -->
-             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50">
+            <!-- Card: Gi vs No-Gi -->
+            <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="50">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-trophy-fill"></i> Training & Progression</h5>
-                         <p class="card-text">How learning and advancement typically happen in BJJ.</p>
-                        <div class="state-heading">Training Methods:</div>
+                        <h5><i class="bi bi-scissors"></i> Gi vs. No-Gi</h5>
+                         <p class="card-text">Two styles of BJJ training with different attire and tactical approaches.</p>
+                        <div class="section-heading"><i class="bi bi-person-badge"></i> Gi (Kimono)</div>
                         <ul>
-                            <li><strong>Drilling:</strong> Repetitive practice of techniques.</li>
-                            <li><strong>Positional Sparring:</strong> Rolling from specific positions with set goals (e.g., Pass/Sweep, Escape/Submit). Includes "Penning" (holding position), "Break Breaking", "Pass & Sweep".</li>
+                            <li><strong>Attire:</strong> Traditional uniform (Jacket, Pants, Belt).</li>
+                            <li><strong>Emphasis:</strong> Grips on the fabric are crucial for control, chokes, and setting up techniques.</li>
                              <li>
-                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-train-roll" role="button" aria-expanded="false" aria-controls="collapse-train-roll"><strong>Rolling (Live Sparring)</strong> <i class="bi bi-chevron-down"></i></a>
-                             </li>
-                             <div class="collapse expandable-content" id="collapse-train-roll">
-                                <p>Free-form grappling applying all learned techniques against a resisting opponent, aiming for submission.</p>
+                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-gi-pros" role="button" aria-expanded="false" aria-controls="collapse-gi-pros"><strong>Pros/Tactics</strong> <i class="bi bi-chevron-down"></i></a>
+                            </li>
+                             <div class="collapse expandable-content" id="collapse-gi-pros">
+                                <p>Slower pace generally, more friction. Emphasizes breaking grips, strong posture defense via collars/sleeves. Many collar chokes and Gi-specific guards (Lasso, Spider).</p>
                              </div>
                         </ul>
-                         <div class="state-heading">Belt System (Adult):</div>
-                         <ul>
-                             <li>White -> Blue -> Purple -> Brown -> Black -> Red/Black -> Red</li>
-                             <li>Stripes (usually 0-4) mark progress within belts.</li>
-                             <li>Promotion based on skill, knowledge, time, consistency (instructor discretion). Avg. 8-12+ years to Black Belt.</li>
-                         </ul>
+                        <div class="section-heading"><i class="bi bi-person-dash"></i> No-Gi</div>
+                        <ul>
+                            <li><strong>Attire:</strong> Rashguard, Spats/Shorts.</li>
+                            <li><strong>Emphasis:</strong> Grips on body parts (wrist, neck, ankle) and body locks (over/underhooks). Friction is lower.</li>
+                            <li>
+                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-nogi-pros" role="button" aria-expanded="false" aria-controls="collapse-nogi-pros"><strong>Pros/Tactics</strong> <i class="bi bi-chevron-down"></i></a>
+                            </li>
+                             <div class="collapse expandable-content" id="collapse-nogi-pros">
+                                <p>Faster pace generally, more scrambles. Emphasizes wrestling concepts, leg locks (more prevalent/varied often), guillotines, RNC, arm triangles. Focus on controlling limbs and body position directly.</p>
+                             </div>
+                        </ul>
+                         <p class="small fst-italic mt-2">Most schools recommend training both for well-rounded development.</p>
                     </div>
                 </div>
             </div>
 
-             <!-- Card: Etiquette & Safety -->
+             <!-- Card: Tips for Success -->
             <div class="col-lg-4 col-md-6 col-sm-12" data-aos="fade-up" data-aos-delay="100">
                 <div class="info-card">
                     <div class="card-body">
-                        <h5><i class="bi bi-shield-check"></i> Etiquette & Safety</h5>
-                         <p class="card-text">Key practices for a safe and respectful training environment.</p>
+                        <h5><i class="bi bi-check2-circle"></i> Tips for Success</h5>
+                         <p class="card-text">Advice for navigating the BJJ journey effectively and enjoyably.</p>
                          <ul>
-                            <li>
-                                <a class="expandable-trigger" data-bs-toggle="collapse" href="#collapse-safe-tap" role="button" aria-expanded="false" aria-controls="collapse-safe-tap"><strong>Tap Early, Tap Often</strong> <i class="bi bi-chevron-down"></i></a>
-                            </li>
-                             <div class="collapse expandable-content" id="collapse-safe-tap">
-                                <p>Signal submission clearly (tap partner, mat, or say "Tap!") before injury occurs. Ego < Safety.</p>
-                            </div>
-                            <li><strong>Hygiene:</strong> Keep yourself and gear (Gi/No-Gi) clean. Trim nails. Avoid training when sick or with infections.</li>
-                            <li><strong>Mat Safety:</strong> No shoes on mats. Wear footwear off mats. Be aware of surroundings during rolling (spatial awareness).</li>
-                            <li><strong>Respect:</strong> Instructors, training partners (esp. higher belts), the space. Bowing on/off mats is common.</li>
-                            <li><strong>Be a Good Partner:</strong> Control techniques, don't crank subs, be mindful of size differences.</li>
-                            <li><strong>Listen to Your Body:</strong> Rest, recover, don't train through major injuries. Communicate limitations.</li>
-                             <li><strong>Oss / Ossu:</strong> Common term of respect/affirmation.</li>
+                            <li><i class="bi bi-calendar-check text-success me-1"></i><strong>Consistency is King:</strong> Show up regularly, even for short sessions. Mat time compounds.</li>
+                            <li><i class="bi bi-mortarboard-fill text-primary me-1"></i><strong>Focus on Fundamentals:</strong> Master escapes, posture, basic positions before complex techniques.</li>
+                            <li><i class="bi bi-shield-lock text-info me-1"></i><strong>Prioritize Defense:</strong> Learn to survive before you learn to submit. Good defense builds confidence.</li>
+                            <li><i class="bi bi-patch-question-fill text-warning me-1"></i><strong>Ask Questions:</strong> Don't be afraid to ask instructors or senior belts for clarification.</li>
+                            <li><i class="bi bi-heart-fill text-danger me-1"></i><strong>Manage Your Ego:</strong> Everyone taps. See rolling as learning, not winning/losing.</li>
+                            <li><i class="bi bi-people text-secondary me-1"></i><strong>Train with Everyone:</strong> Experience different body types, styles, and skill levels (safely).</li>
+                            <li><i class="bi bi-book text-success me-1"></i><strong>Study Off the Mat:</strong> Watch instructionals, competition footage, analyze your rolls.</li>
+                            <li><i class="bi bi-battery-charging text-primary me-1"></i><strong>Rest & Recover:</strong> Overtraining leads to injury and burnout. Listen to your body.</li>
+                            <li><i class="bi bi-emoji-smile-fill text-accent me-1"></i><strong>Have Fun!</strong> Enjoy the process, the community, and the challenge.</li>
                         </ul>
                     </div>
                 </div>
@@ -619,14 +671,19 @@
     </div> <!-- /.container -->
 
 <footer class="container text-center pb-3">
-    <p>This cheatsheet provides a basic overview of Brazilian Jiu-Jitsu concepts and techniques. Continuous learning under qualified instruction is essential.</p>
-    <p>Key BJJ Resources:
-        <a href="https://ibjjf.com/" target="_blank" rel="noopener noreferrer">IBJJF (Federation)</a> |
-        <a href="https://www.bjjheroes.com/" target="_blank" rel="noopener noreferrer">BJJ Heroes (History & Database)</a> |
-        <a href="https://www.youtube.com/results?search_query=bjj+techniques" target="_blank" rel="noopener noreferrer">YouTube (Technique Search)</a>
-        <!-- Add other relevant links like popular instructional sites if desired -->
+    <p>This cheatsheet provides a foundational overview. BJJ is a deep and complex art requiring consistent practice under qualified instructors.</p>
+    <p><strong>Key BJJ Resources:</strong>
+        <a href="https://ibjjf.com/" target="_blank" rel="noopener noreferrer"><i class="bi bi-trophy"></i> IBJJF</a> |
+        <a href="https://www.bjjheroes.com/" target="_blank" rel="noopener noreferrer"><i class="bi bi-journal-richtext"></i> BJJ Heroes</a> |
+        <a href="https://www.reddit.com/r/bjj/" target="_blank" rel="noopener noreferrer"><i class="bi bi-reddit"></i> r/bjj Reddit</a> <br>
+        <span class="fw-bold">Reputable YouTube Channels (Instruction/Concepts):</span>
+        <a href="https://www.youtube.com/@bernardofariabjj" target="_blank" rel="noopener noreferrer"><i class="bi bi-youtube"></i> Bernardo Faria</a> |
+        <a href="https://www.youtube.com/@Chewjitsu" target="_blank" rel="noopener noreferrer"><i class="bi bi-youtube"></i> Chewjitsu</a> |
+        <a href="https://www.youtube.com/@JordanTeachesJiujitsu" target="_blank" rel="noopener noreferrer"><i class="bi bi-youtube"></i> Jordan Teaches</a> |
+         <a href="https://www.youtube.com/@jonthomasbjj" target="_blank" rel="noopener noreferrer"><i class="bi bi-youtube"></i> Jon Thomas</a> |
+        <a href="https://www.youtube.com/@GracieBreakdown" target="_blank" rel="noopener noreferrer"><i class="bi bi-youtube"></i> Gracie Breakdown</a>
     </p>
-    <p class="mb-2">Inspired by the 15 Commitments Cheatsheet layout. <br> © 2025 AI Assistant. Please verify information with trusted BJJ sources.</p>
+    <p class="mb-2">© 2025 AI Assistant. Information for reference purposes only. Always prioritize safety and qualified instruction.</p>
 
 </footer>
 
@@ -636,19 +693,14 @@
     <script>
         // Initialize AOS (Animate on Scroll)
         AOS.init({
-            duration: 600,
-            easing: 'ease-in-out',
-            once: true,
+            duration: 600, // Animation duration
+            easing: 'ease-in-out-quad', // Smoother easing
+            once: true, // Animate only once
             mirror: false,
-            offset: 50, // Lower offset to trigger sooner
-            delay: 0,
+            offset: 70, // Trigger animation slightly later
+            delay: 50, // Small delay on elements
         });
 
-        // Optional: Initialize tooltips if you add any later
-        // var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-        // var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-        //   return new bootstrap.Tooltip(tooltipTriggerEl)
-        // });
     </script>
 
 </body>