enh: reorder tab navigation in HTML for improved user experience; update CSS styles for better visual integration and remove unnecessary effects

Author: noamjgal

css/styles.css

@@ -2233,22 +2233,25 @@ input:checked + .toggle-slider:hover {
     align-items: flex-start;
     gap: var(--space-xl);
     margin-bottom: var(--space-2xl);
-    padding: var(--space-xl);
-    background: var(--glass-bg);
-    backdrop-filter: blur(8px) saturate(120%);
-    -webkit-backdrop-filter: blur(8px) saturate(120%);
-    border-radius: var(--radius-lg);
-    border-left: 4px solid var(--accent-blue);
-    transition: all 0.2s ease;
+    padding: var(--space-lg) 0;
+    background: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-radius: 0;
+    border-left: 3px solid var(--accent-blue);
+    transition: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-left: var(--space-lg);
 }
 
 .guide-step:hover {
-    background: var(--hover-bg);
-    transform: translateX(2px);
+    background: transparent;
+    transform: none;
 }
 
 .guide-step:last-child {
     margin-bottom: 0;
+    border-bottom: none;
 }
 
 .step-number {
@@ -2264,7 +2267,7 @@ input:checked + .toggle-slider:hover {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-size: 16px;
     flex-shrink: 0;
-    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+    box-shadow: none;
 }
 
 .step-content {

index.html

@@ -281,12 +281,12 @@ <h1>The Right to Shelter</h1>
                 <div class="modal-body modal-body-tabs">
                     <!-- Tab Navigation -->
                     <div class="modal-tabs">
-                        <button class="tab-button active" data-tab="info">Research & Analysis</button>
-                        <button class="tab-button" data-tab="guide">How to Use</button>
+                        <button class="tab-button active" data-tab="guide">How to Use</button>
+                        <button class="tab-button" data-tab="info">Research & Analysis</button>
                     </div>
 
                     <!-- Info Container -->
-                    <div class="tab-content info-container active" id="info-tab">
+                    <div class="tab-content info-container" id="info-tab">
                         <div class="info-intro">
                             <p>This analysis evaluates bomb shelter accessibility for Bedouin communities in the Eastern Negev, identifying underserved areas and proposing optimal new shelter locations using spatial data analysis and machine learning methods.</p>
 
@@ -383,7 +383,7 @@ <h4>Collaborating Organizations</h4>
                     </div>
 
                     <!-- Guide Container -->
-                    <div class="tab-content guide-container" id="guide-tab">
+                    <div class="tab-content guide-container active" id="guide-tab">
                         <div class="guide-intro">
                             <h2>Guide</h2>
                         </div>