/* Data Page Specific Styles - Mobile First */
 .data-page {
     background: #f5f5f5;
 }

 /* Hero Section */
 .data-hero {
     position: relative;
     background: url("../../media/images/global-network-digital-world-connection.jpg") center/cover no-repeat;
     padding: 60px 20px;
     color: white;
     text-align: center;
 }

 .data-hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, rgba(0, 51, 102, 0.75), rgba(0, 51, 102, 0.9));
 }

 .data-hero h1 {
     position: relative;
     z-index: 2;
     font-size: 36px;
     margin-bottom: 15px;
     font-weight: 800;
     line-height: 1.2;
 }

 .data-hero p {
     position: relative;
     z-index: 2;
     font-size: 18px;
     color: rgba(255, 255, 255, 0.95);
     line-height: 1.7;
     max-width: 800px;
     margin: 0 auto;
 }

 /* Introduction Section */
 .intro-section {
     background: white;
     padding: 60px 20px;
 }

 .intro-container {
     max-width: 900px;
     margin: 0 auto;
 }

 .intro-text {
     font-size: 18px;
     color: #555;
     line-height: 1.8;
     margin-bottom: 20px;
 }

 .intro-text strong {
     color: #003366;
     font-weight: 600;
 }

 .intro-highlight {
     background: #f8f9fa;
     border-left: 4px solid #FF8C00;
     padding: 25px;
     margin: 30px 0;
     font-size: 18px;
     color: #333;
     font-weight: 500;
     line-height: 1.7;
 }

 /* Data Sources Section */
 .sources-section {
     background: #f8f9fa;
     padding: 60px 20px;
 }

 .sources-container {
     max-width: 1200px;
     margin: 0 auto;
 }

 .section-title {
     font-size: 32px;
     color: #003366;
     margin-bottom: 15px;
     font-weight: 700;
     text-align: center;
 }

 .section-subtitle {
     text-align: center;
     font-size: 16px;
     color: #666;
     margin-bottom: 50px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 .sources-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 30px;
 }

 .source-card {
     background: white;
     border-radius: 10px;
     padding: 30px 25px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .source-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
 }

 .source-number {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background: #FF8C00;
     color: white;
     border-radius: 50%;
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 20px;
 }

 .source-title {
     font-size: 22px;
     color: #003366;
     margin-bottom: 15px;
     font-weight: 700;
 }

 .source-description {
     color: #666;
     line-height: 1.7;
     font-size: 16px;
 }

 /* Commitment Section */
 .commitment-section {
     background: linear-gradient(135deg, #001533, #002147);
     padding: 60px 20px;
 }

 .commitment-section .section-title {
     color: #ffffff;
 }

 .commitment-container {
     max-width: 900px;
     margin: 0 auto;
 }

 .commitment-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 25px;
     margin-top: 40px;
 }

 .commitment-item {
     display: flex;
     gap: 20px;
     padding: 25px 20px;
     background: #ffffff;
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
 }

 .commitment-icon {
     flex-shrink: 0;
     color: #FF8C00;
     width: 32px;
     text-align: center;
 }

 .commitment-content h3 {
     color: #003366;
     font-size: 18px;
     margin-bottom: 8px;
     font-weight: 700;
 }

 .commitment-content p {
     color: #666;
     line-height: 1.6;
     font-size: 15px;
 }

 /* Confidence Scoring Section */
 .confidence-section {
     background: white;
     padding: 60px 20px;
 }

 .confidence-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     margin-top: 40px;
 }

 .confidence-item {
     display: flex;
     gap: 20px;
     padding: 25px 20px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     align-items: flex-start;
 }

 .confidence-item .confidence-badge {
     flex-shrink: 0;
     padding: 10px 20px;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     min-width: 90px;
     text-align: center;
 }

 .confidence-item .confidence-high {
     background: #d4edda;
     color: #155724;
 }

 .confidence-item .confidence-medium {
     background: #fff3cd;
     color: #856404;
 }

 .confidence-item .confidence-low {
     background: #f8d7da;
     color: #721c24;
 }

 .confidence-content h3 {
     color: #003366;
     font-size: 18px;
     margin-bottom: 8px;
     font-weight: 700;
 }

 .confidence-content p {
     color: #666;
     line-height: 1.6;
     font-size: 15px;
 }

 /* CTA Section */
 .cta-section {
     background: linear-gradient(135deg, #003366, #004B87);
     padding: 60px 20px;
     color: white;
     text-align: center;
 }

 .cta-container {
     max-width: 800px;
     margin: 0 auto;
 }

 .cta-section h2 {
     font-size: 32px;
     margin-bottom: 15px;
     font-weight: 700;
 }

 .cta-section p {
     font-size: 18px;
     margin-bottom: 30px;
     color: rgba(255, 255, 255, 0.95);
     line-height: 1.7;
 }

 .cta-button {
     display: inline-block;
     padding: 16px 40px;
     background-color: #FF8C00;
     color: white;
     text-decoration: none;
     border-radius: 5px;
     font-weight: 700;
     font-size: 16px;
     transition: all 0.3s ease;
 }

 .cta-button:hover {
     background-color: #e67e00;
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
 }

 /* Tablet and up (≥641px - 768px) */
 @media (min-width: 641px) {
     .data-hero {
         padding: 80px 20px;
     }

     .data-hero h1 {
         font-size: 42px;
         margin-bottom: 20px;
     }

     .data-hero p {
         font-size: 20px;
     }

     .intro-section,
     .sources-section,
     .commitment-section,
     .confidence-section,
     .cta-section {
         padding: 80px 20px;
     }

     .intro-text {
         font-size: 19px;
     }

     .intro-highlight {
         font-size: 20px;
         padding: 30px;
     }

     .section-title {
         font-size: 36px;
         margin-bottom: 20px;
     }

     .section-subtitle {
         font-size: 18px;
         margin-bottom: 60px;
     }

     .sources-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 30px;
     }

     .source-card {
         padding: 35px 30px;
     }

     .source-title {
         font-size: 24px;
     }

     .commitment-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 30px;
     }

     .commitment-item {
         padding: 30px 25px;
     }

     .commitment-content h3 {
         font-size: 20px;
     }

     .cta-section h2 {
         font-size: 38px;
         margin-bottom: 20px;
     }

     .cta-section p {
         font-size: 20px;
         margin-bottom: 35px;
     }
 }

 /* Desktop (1025px and up) */
 @media (min-width: 1025px) {
     .data-hero h1 {
         font-size: 48px;
     }

     .sources-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 40px;
     }

     .cta-section h2 {
         font-size: 42px;
     }
 }