Redesign future-of-warfare-technology.html with interactive timeline structure

1 file changed +355 −139

Diff

diff --git a/future-of-warfare-technology.html b/future-of-warfare-technology.html
index e93922a..5df4052 100644
--- a/future-of-warfare-technology.html
+++ b/future-of-warfare-technology.html
@@ -53,6 +53,10 @@
             --danger: #ff4d6d;
             --success: #63ffa1;
             --border: rgba(255, 255, 255, 0.08);
+            --phase-1: #00ffc6;
+            --phase-2: #00d4aa;
+            --phase-3: #ff9500;
+            --phase-4: #ff7a18;
         }
         body {
             background-color: var(--bg);
@@ -70,6 +74,69 @@
             box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
             margin-bottom: 2rem;
         }
+        .timeline-nav {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 3rem;
+            flex-wrap: wrap;
+        }
+        .timeline-phase-btn {
+            flex: 1;
+            min-width: 200px;
+            padding: 1.5rem 1rem;
+            border: 2px solid var(--border);
+            border-radius: 0.75rem;
+            background: var(--panel);
+            color: var(--text);
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .timeline-phase-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 4px;
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+        .timeline-phase-btn.phase-1 { --phase-color: var(--phase-1); }
+        .timeline-phase-btn.phase-2 { --phase-color: var(--phase-2); }
+        .timeline-phase-btn.phase-3 { --phase-color: var(--phase-3); }
+        .timeline-phase-btn.phase-4 { --phase-color: var(--phase-4); }
+        .timeline-phase-btn::before { background: var(--phase-color); }
+        .timeline-phase-btn:hover {
+            border-color: var(--phase-color);
+            box-shadow: 0 0 20px rgba(0, 255, 198, 0.15);
+        }
+        .timeline-phase-btn.active {
+            border-color: var(--phase-color);
+            background: rgba(0, 255, 198, 0.05);
+        }
+        .timeline-phase-btn.active::before {
+            width: 100%;
+        }
+        .phase-content {
+            display: none;
+            animation: slideIn 0.4s ease;
+        }
+        .phase-content.active {
+            display: block;
+        }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
         .section-title {
             border-left: 4px solid var(--accent);
             padding-left: 0.75rem;
@@ -83,6 +150,26 @@
             gap: 0.5rem;
         }
         .section-title .bi { color: var(--accent); font-size: 1.1rem; }
+        .theme-group {
+            margin-bottom: 2.5rem;
+        }
+        .theme-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 1.5rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+        }
+        .theme-header .bi {
+            font-size: 1.5rem;
+            color: var(--accent);
+        }
+        .theme-header h3 {
+            margin: 0;
+            font-size: 1.25rem;
+            color: var(--text);
+        }
         .info-card {
             background: linear-gradient(145deg, var(--panel), var(--panel-alt));
             border: 1px solid var(--border);
@@ -90,6 +177,11 @@
             padding: 1.5rem;
             height: 100%;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+            transition: all 0.3s ease;
+        }
+        .info-card:hover {
+            border-color: var(--accent);
+            transform: translateY(-2px);
         }
         .info-card.highlight {
             border-color: rgba(0, 255, 198, 0.4);
@@ -107,24 +199,12 @@
             font-size: 0.85rem;
             font-weight: 600;
         }
-        .lane-list li {
-            margin-bottom: 1rem;
-        }
-        .lane-list strong {
-            color: var(--accent);
-        }
         .lane-details {
             margin-top: 0.5rem;
             color: var(--muted);
         }
-        .timeline {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-            gap: 1rem;
-        }
-        .timeline .phase {
-            border-left: 3px solid var(--accent-2);
-            padding-left: 1rem;
+        .lane-details li {
+            margin-bottom: 0.5rem;
         }
         .interactive-panel {
             background: rgba(8, 13, 24, 0.75);
@@ -157,14 +237,23 @@
         .print-note {
             display: none;
         }
+        .theme-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 1.5rem;
+        }
         @media (max-width: 768px) {
             .page-header { padding: 2rem 1.5rem; }
+            .timeline-nav { gap: 0.75rem; }
+            .timeline-phase-btn { min-width: 160px; padding: 1rem 0.75rem; }
+            .theme-grid { grid-template-columns: 1fr; }
         }
         @media print {
             body { background: #fff; color: #000; }
             .page-header, .info-card { box-shadow: none; }
             .print-note { display: block; font-style: italic; color: #555; margin-top: 1rem; }
             .interactive-panel { border: 1px dashed #999; }
+            .timeline-nav { gap: 0.5rem; }
         }
     </style>
 </head>
@@ -174,18 +263,42 @@
             <p class="text-uppercase text-muted mb-2">Future Warfare 2035+ Playbook</p>
             <h1 class="display-5 fw-bold">The Future of Warfare Technology</h1>
             <p class="lead mb-0">Battlefields in the next 10–30 years will be defined by <strong>distributed sensing + edge AI + cheap autonomy</strong>, with <strong>spectrum &amp; cyber control</strong> as strategic assets; lethality migrates from rifles to networked systems-of-systems.</p>
-            <p class="mt-3 mb-0">Physical lines (fiber, power) and trusted compute become prized targets and assets.</p>
-            <div class="print-note">Print view: collapse interactive sections for concise briefings.</div>
+            <p class="mt-3 mb-0">Physical lines (fiber, power) and trusted compute become prized targets and assets. Use the timeline below to explore how each technology theme evolves across phases.</p>
+            <div class="print-note">Print view: timeline navigation may be simplified for concise briefings.</div>
         </header>
 
         <section class="mb-5">
-            <h2 class="section-title"><i class="bi bi-diagram-3" aria-hidden="true"></i>Top Tech Lanes (Ranked)</h2>
-            <div class="row g-4" id="lane-grid">
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card highlight" data-lane="autonomy" data-phase="near" data-impact="very-high">
+            <h2 class="section-title"><i class="bi bi-clock-history" aria-hidden="true"></i>Interactive Development Timeline</h2>
+            <div class="timeline-nav">
+                <button class="timeline-phase-btn phase-1 active" data-phase="phase-1">
+                    <i class="bi bi-lightning-charge me-2" aria-hidden="true"></i>1–3 Years<br><small style="font-size: 0.8rem; font-weight: 400;">Emerging &amp; Fielding</small>
+                </button>
+                <button class="timeline-phase-btn phase-2" data-phase="phase-2">
+                    <i class="bi bi-shield-check me-2" aria-hidden="true"></i>3–8 Years<br><small style="font-size: 0.8rem; font-weight: 400;">Maturing &amp; Scaling</small>
+                </button>
+                <button class="timeline-phase-btn phase-3" data-phase="phase-3">
+                    <i class="bi bi-diagram-3 me-2" aria-hidden="true"></i>8–15 Years<br><small style="font-size: 0.8rem; font-weight: 400;">Dominant &amp; Integrated</small>
+                </button>
+                <button class="timeline-phase-btn phase-4" data-phase="phase-4">
+                    <i class="bi bi-stars me-2" aria-hidden="true"></i>15–30 Years<br><small style="font-size: 0.8rem; font-weight: 400;">Fully Networked</small>
+                </button>
+            </div>
+        </section>
+
+        <!-- Phase 1 Content -->
+        <section class="phase-content active" id="phase-1-content">
+            <h2 class="section-title"><i class="bi bi-lightning-charge" aria-hidden="true"></i>Phase 1: Emerging & Fielding (1–3 Years)</h2>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-cpu" aria-hidden="true"></i>
+                    <h3>Autonomy &amp; Edge AI</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card highlight">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Autonomy &amp; Edge AI</h3>
-                            <span class="badge badge-impact impact-very-high">95% dominance</span>
+                            <h4 class="h6 mb-0">Sensor→Shooter Loops Closing</h4>
+                            <span class="badge badge-impact impact-very-high">95% Impact</span>
                         </div>
                         <p class="mb-2">Sensor→shooter loops close in &lt;200 ms with 2–20 W inference nodes running 0.5–5 TOPS quantized models; humans arbitrate ambiguous ROE cases only.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -194,11 +307,18 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="swarms" data-phase="near" data-impact="very-high">
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-airplane" aria-hidden="true"></i>
+                    <h3>Swarmed Loitering Munitions</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Swarmed Loitering Munitions</h3>
-                            <span class="badge badge-impact impact-very-high">90% adoption</span>
+                            <h4 class="h6 mb-0">Affordable &amp; Expendable</h4>
+                            <span class="badge badge-impact impact-very-high">90% Adoption</span>
                         </div>
                         <p class="mb-2">Expendable drones at $200–$2k per sortie make attrition math favor swarms over manned sorties or exposed infantry.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -207,11 +327,18 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="ew" data-phase="near" data-impact="very-high">
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-broadcast" aria-hidden="true"></i>
+                    <h3>Electronic Warfare &amp; Spectrum</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Electronic Warfare &amp; Spectrum</h3>
-                            <span class="badge badge-impact impact-very-high">95% decisive</span>
+                            <h4 class="h6 mb-0">Jamming &amp; Spoofing Surge</h4>
+                            <span class="badge badge-impact impact-very-high">95% Decisive</span>
                         </div>
                         <p class="mb-2">Jamming, spoofing, and sensing denial surge; GNSS-independent localization with 1–5 m drift for 30–120 s becomes must-have.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -220,11 +347,23 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="comms" data-phase="mid" data-impact="high">
+            </div>
+        </section>
+
+        <!-- Phase 2 Content -->
+        <section class="phase-content" id="phase-2-content">
+            <h2 class="section-title"><i class="bi bi-shield-check" aria-hidden="true"></i>Phase 2: Maturing & Scaling (3–8 Years)</h2>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-hdd-network" aria-hidden="true"></i>
+                    <h3>Resilient Comms Backbone</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Resilient Comms Backbone</h3>
-                            <span class="badge badge-impact impact-high">85% hybrid stack</span>
+                            <h4 class="h6 mb-0">Fiber, mmWave, FSO Integration</h4>
+                            <span class="badge badge-impact impact-high">85% Hybrid Stack</span>
                         </div>
                         <p class="mb-2">Fiber, mmWave, FSO, and LEO/mesh integration deliver &lt;100 ms targeting data; fiber cut/repair/armoring becomes tactical mission.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -233,11 +372,18 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="cyber" data-phase="mid" data-impact="very-high">
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-shield-lock" aria-hidden="true"></i>
+                    <h3>Cyber &amp; Trusted Compute</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Cyber &amp; Trusted Compute</h3>
-                            <span class="badge badge-impact impact-very-high">95% mandatory</span>
+                            <h4 class="h6 mb-0">TPM &amp; Attestation Imperative</h4>
+                            <span class="badge badge-impact impact-very-high">95% Mandatory</span>
                         </div>
                         <p class="mb-2">Autonomy trust hinges on TPM-class attestation, shot logs, and remote verification &lt;1 s; supply-chain integrity becomes part of fires approval.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -246,11 +392,18 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="directed-energy" data-phase="mid" data-impact="high">
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-bullseye" aria-hidden="true"></i>
+                    <h3>Directed Energy (DE)</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Directed Energy (DE)</h3>
-                            <span class="badge badge-impact impact-high">70% tactical</span>
+                            <h4 class="h6 mb-0">Tactical Counter-UAS</h4>
+                            <span class="badge badge-impact impact-high">70% Tactical</span>
                         </div>
                         <p class="mb-2">10–100 kW lasers and microwaves defend fixed sites/vehicles, neutralizing small UAS at tens-hundreds of meters once thermal loads are solved.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -259,11 +412,18 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="logistics" data-phase="mid" data-impact="high">
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-truck" aria-hidden="true"></i>
+                    <h3>Logistics Automation</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Logistics Automation</h3>
-                            <span class="badge badge-impact impact-high">80% adoption</span>
+                            <h4 class="h6 mb-0">UGV Resupply &amp; AM</h4>
+                            <span class="badge badge-impact impact-high">80% Adoption</span>
                         </div>
                         <p class="mb-2">UGV resupply + additive manufacturing extend small-unit endurance 2–5×, enabling distributed, low-signature operations.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -272,11 +432,88 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="space" data-phase="long" data-impact="medium">
+            </div>
+        </section>
+
+        <!-- Phase 3 Content -->
+        <section class="phase-content" id="phase-3-content">
+            <h2 class="section-title"><i class="bi bi-diagram-3" aria-hidden="true"></i>Phase 3: Dominant & Integrated (8–15 Years)</h2>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-cpu" aria-hidden="true"></i>
+                    <h3>Autonomy &amp; Edge AI Maturity</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
+                        <div class="d-flex justify-content-between align-items-start mb-2">
+                            <h4 class="h6 mb-0">Standardized AI at Scale</h4>
+                            <span class="badge badge-impact impact-very-high">95% Integration</span>
+                        </div>
+                        <p class="mb-2">Edge AI inference becomes ubiquitous across all platforms; trustworthy autonomous decision-making is mainstream with proven ROE audit trails.</p>
+                        <ul class="lane-details list-unstyled mb-0">
+                            <li><i class="bi bi-diagram-3 text-info"></i> Standardized models deployed across theaters.</li>
+                            <li><i class="bi bi-cloud-check text-success"></i> Immutable logs enable confidence-based engagement.</li>
+                        </ul>
+                    </article>
+                </div>
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-shield-lock" aria-hidden="true"></i>
+                    <h3>Cyber &amp; Trusted Compute (Advanced)</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
+                        <div class="d-flex justify-content-between align-items-start mb-2">
+                            <h4 class="h6 mb-0">Fielded Attestation & Forensics</h4>
+                            <span class="badge badge-impact impact-very-high">95% Mandatory</span>
+                        </div>
+                        <p class="mb-2">Standardized trusted compute + attestation protocols enable in-field verification and forensic shot logs as standard military practice.</p>
+                        <ul class="lane-details list-unstyled mb-0">
+                            <li><i class="bi bi-cpu text-info"></i> Supply-chain trust embedded in all weapons.</li>
+                            <li><i class="bi bi-cloud-check text-success"></i> Real-time posture validation in combat.</li>
+                        </ul>
+                    </article>
+                </div>
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-hdd-network" aria-hidden="true"></i>
+                    <h3>Resilient Comms (Hardened)</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Space &amp; Counter-Space</h3>
-                            <span class="badge badge-impact impact-medium">75% shaping</span>
+                            <h4 class="h6 mb-0">Mesh Redundancy Standard</h4>
+                            <span class="badge badge-impact impact-high">85% Defensive</span>
+                        </div>
+                        <p class="mb-2">Fiber infrastructure hardened with redundant FSO/LEO; rapid repair teams and mobile relay nodes standard doctrine.</p>
+                        <ul class="lane-details list-unstyled mb-0">
+                            <li><i class="bi bi-hdd-network text-info"></i> Multi-layer comms stack proven in contested</li>
+                            <li><i class="bi bi-tools text-warning"></i> Automated failure detection &amp; rerouting.</li>
+                        </ul>
+                    </article>
+                </div>
+            </div>
+        </section>
+
+        <!-- Phase 4 Content -->
+        <section class="phase-content" id="phase-4-content">
+            <h2 class="section-title"><i class="bi bi-stars" aria-hidden="true"></i>Phase 4: Fully Networked (15–30 Years)</h2>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-stars" aria-hidden="true"></i>
+                    <h3>Space &amp; Counter-Space</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
+                        <div class="d-flex justify-content-between align-items-start mb-2">
+                            <h4 class="h6 mb-0">Proliferated LEO Dominance</h4>
+                            <span class="badge badge-impact impact-medium">75% Shaping</span>
                         </div>
                         <p class="mb-2">Proliferated LEO ISR, resilient PNT, and counter-space (kinetic &amp; non-kinetic) shape strategic options; on-orbit repair &amp; redundancy critical.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -285,11 +522,18 @@
                         </ul>
                     </article>
                 </div>
-                <div class="col-md-6 col-lg-4">
-                    <article class="info-card" data-lane="biotech" data-phase="long" data-impact="medium">
+            </div>
+
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-eyedropper" aria-hidden="true"></i>
+                    <h3>Biotech &amp; Non-Kinetic Capabilities</h3>
+                </div>
+                <div class="theme-grid">
+                    <article class="info-card">
                         <div class="d-flex justify-content-between align-items-start mb-2">
-                            <h3 class="h5 mb-0">Biotech &amp; Non-Kinetic</h3>
-                            <span class="badge badge-impact impact-medium">Niche impact</span>
+                            <h4 class="h6 mb-0">Advanced CBRN &amp; Medical Tech</h4>
+                            <span class="badge badge-impact impact-medium">Niche Impact</span>
                         </div>
                         <p class="mb-2">High legal/strategic hurdles keep biotech secondary for conventional war, but CBRN detection, synthetic bio threats, and medical enhancements gain niche relevance.</p>
                         <ul class="lane-details list-unstyled mb-0">
@@ -299,55 +543,25 @@
                     </article>
                 </div>
             </div>
-        </section>
 
-        <section class="mb-5">
-            <div class="row g-4">
-                <div class="col-lg-7">
-                    <h2 class="section-title"><i class="bi bi-intersect" aria-hidden="true"></i>Systems View</h2>
+            <div class="theme-group">
+                <div class="theme-header">
+                    <i class="bi bi-diagram-3" aria-hidden="true"></i>
+                    <h3>Networked Autonomous Warfare Dominates</h3>
+                </div>
+                <div class="theme-grid">
                     <article class="info-card">
-                        <ul class="mb-0 list-unstyled">
-                            <li><i class="bi bi-eye icon-accent me-2" aria-hidden="true"></i><strong>Sensing layer</strong>: ubiquitous ISR (drones, acoustics, passive RF, space assets) floods the stack with data.</li>
-                            <li><i class="bi bi-cpu icon-accent me-2" aria-hidden="true"></i><strong>Edge layer</strong>: quantized AI nodes fuse multimodal inputs, delivering &lt;200 ms high-confidence target cues.</li>
-                            <li><i class="bi bi-bullseye icon-accent me-2" aria-hidden="true"></i><strong>Effectors</strong>: swarms, loitering munitions, remote guns, and precision fires share aimpoints over low-latency mesh; humans supervise high-risk engagements.</li>
-                            <li><i class="bi bi-shield-lock icon-accent me-2" aria-hidden="true"></i><strong>Resilience layer</strong>: fiber/FSO/mmWave backbone with RF fallback + LEO routing, OTDR tamper detection, rapid recovery kits.</li>
-                            <li><i class="bi bi-lightning-charge icon-accent me-2" aria-hidden="true"></i><strong>Defeat layer</strong>: EW + cyber + kinetic + DE + deception, with counter-autonomy treated as co-equal mission set.</li>
+                        <div class="d-flex justify-content-between align-items-start mb-2">
+                            <h4 class="h6 mb-0">Full Systems Integration</h4>
+                            <span class="badge badge-impact impact-very-high">95% Dominant</span>
+                        </div>
+                        <p class="mb-2">All warfare technology themes converge into a unified systems-of-systems; direct rifle engagements become rare in peer/near-peer conflicts.</p>
+                        <ul class="lane-details list-unstyled mb-0">
+                            <li><i class="bi bi-broadcast text-info"></i> Fully autonomous kill-chains with human oversight.</li>
+                            <li><i class="bi bi-shield-lock text-success"></i> Total integration of cyber, space, EW &amp; kinetic.</li>
                         </ul>
                     </article>
                 </div>
-                <div class="col-lg-5">
-                    <h2 class="section-title"><i class="bi bi-funnel" aria-hidden="true"></i>Interactive Filter</h2>
-                    <div class="interactive-panel" id="lane-filter">
-                        <p class="mb-2 text-muted">Toggle to surface lanes by timeline impact.</p>
-                        <div class="row g-2">
-                            <div class="col-6">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" value="near" id="filterNear" checked />
-                                    <label class="form-check-label" for="filterNear">1–3 yr lanes</label>
-                                </div>
-                            </div>
-                            <div class="col-6">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" value="mid" id="filterMid" checked />
-                                    <label class="form-check-label" for="filterMid">3–8 yr lanes</label>
-                                </div>
-                            </div>
-                            <div class="col-6">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" value="long" id="filterLong" checked />
-                                    <label class="form-check-label" for="filterLong">8+ yr lanes</label>
-                                </div>
-                            </div>
-                            <div class="col-6">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="checkbox" value="very-high" id="filterVeryHigh" checked />
-                                    <label class="form-check-label" for="filterVeryHigh">95%+ impact</label>
-                                </div>
-                            </div>
-                        </div>
-                        <small class="text-muted d-block mt-3">Filters persist via localStorage for recurring briefings.</small>
-                    </div>
-                </div>
             </div>
         </section>
 
@@ -476,51 +690,53 @@
 
     <script>
         (function () {
-            const filters = {
-                phase: new Set(["near", "mid", "long"]),
-                showVeryHigh: true
-            };
-            const storageKey = "future-warfare-lane-filters";
-            const saved = localStorage.getItem(storageKey);
-            if (saved) {
-                try {
-                    const parsed = JSON.parse(saved);
-                    filters.phase = new Set(parsed.phase || filters.phase);
-                    filters.showVeryHigh = parsed.showVeryHigh !== undefined ? parsed.showVeryHigh : filters.showVeryHigh;
-                } catch (e) {
-                    console.warn("Filter restore failed", e);
-                }
+            // Timeline Navigation Handler
+            const timelineButtons = document.querySelectorAll('.timeline-phase-btn');
+            const phaseContents = document.querySelectorAll('.phase-content');
+            const storageKey = "future-warfare-active-phase";
+
+            function setActivePhase(phaseId) {
+                // Remove active class from all buttons and contents
+                timelineButtons.forEach(btn => btn.classList.remove('active'));
+                phaseContents.forEach(content => content.classList.remove('active'));
+
+                // Add active class to the selected button and content
+                const activeButton = document.querySelector(`.timeline-phase-btn[data-phase="${phaseId}"]`);
+                const activeContent = document.getElementById(`${phaseId}-content`);
+
+                if (activeButton) activeButton.classList.add('active');
+                if (activeContent) activeContent.classList.add('active');
+
+                // Save preference
+                localStorage.setItem(storageKey, phaseId);
             }
-            document.getElementById("filterNear").checked = filters.phase.has("near");
-            document.getElementById("filterMid").checked = filters.phase.has("mid");
-            document.getElementById("filterLong").checked = filters.phase.has("long");
-            document.getElementById("filterVeryHigh").checked = filters.showVeryHigh;
 
-            const cards = document.querySelectorAll("#lane-grid article");
-            function applyFilters() {
-                cards.forEach(card => {
-                    const phase = card.dataset.phase;
-                    const isVeryHigh = card.dataset.impact === "very-high";
-                    const visible = filters.phase.has(phase) && (filters.showVeryHigh || !isVeryHigh);
-                    card.style.display = visible ? "" : "none";
+            // Restore saved phase or default to phase-1
+            const savedPhase = localStorage.getItem(storageKey) || 'phase-1';
+            setActivePhase(savedPhase);
+
+            // Add click handlers
+            timelineButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const phaseId = button.dataset.phase;
+                    setActivePhase(phaseId);
                 });
-                localStorage.setItem(storageKey, JSON.stringify({
-                    phase: Array.from(filters.phase),
-                    showVeryHigh: filters.showVeryHigh
-                }));
-            }
-            document.getElementById("filterNear").addEventListener("change", (e) => { toggle(filters.phase, "near", e.target.checked); applyFilters(); });
-            document.getElementById("filterMid").addEventListener("change", (e) => { toggle(filters.phase, "mid", e.target.checked); applyFilters(); });
-            document.getElementById("filterLong").addEventListener("change", (e) => { toggle(filters.phase, "long", e.target.checked); applyFilters(); });
-            document.getElementById("filterVeryHigh").addEventListener("change", (e) => {
-                filters.showVeryHigh = e.target.checked;
-                applyFilters();
             });
-            function toggle(set, value, enabled) {
-                if (enabled) { set.add(value); } else { set.delete(value); }
-                if (set.size === 0) { set.add(value); }
-            }
-            applyFilters();
+
+            // Keyboard navigation support
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowRight') {
+                    const currentPhase = parseInt(localStorage.getItem(storageKey).match(/\d+/)[0]);
+                    if (currentPhase < 4) {
+                        setActivePhase(`phase-${currentPhase + 1}`);
+                    }
+                } else if (e.key === 'ArrowLeft') {
+                    const currentPhase = parseInt(localStorage.getItem(storageKey).match(/\d+/)[0]);
+                    if (currentPhase > 1) {
+                        setActivePhase(`phase-${currentPhase - 1}`);
+                    }
+                }
+            });
         })();
     </script>
     <script crossorigin="anonymous" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>