/* ===== ABOUT PAGE SPECIFIC STYLES ===== */
 .about-section {
     max-width: 1400px;
     margin: 0 auto;
     padding: var(--space-xl) var(--space-md) var(--space-2xl);
 }

 .section-headline {
     font-size: var(--font-h1);
     font-weight: 700;
     color: var(--text-dark);
     letter-spacing: -0.02em;
     margin-bottom: var(--space-md);
     line-height: var(--line-tight);
     text-align: center;
 }

 .section-headline span {
     color: var(--sky-deep);
 }

 .underlined-heading {
     display: inline-block;
     position: relative;
     padding-bottom: 6px;
 }

 .underlined-heading::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 4px;
     background: var(--gradient-primary);
     border-radius: var(--radius-sm);
     box-shadow: 0 2px 8px var(--underline-glow);
 }

 /* Hero Description */
 .hero-description {
     font-size: var(--font-h4);
     color: var(--text-soft);
     max-width: 900px;
     margin: var(--space-md) auto var(--space-xl);
     line-height: var(--line-loose);
     text-align: center;
 }

 /* Last Updated Badge */
 .last-updated {
     display: inline-block;
     background: var(--sky-light);
     color: var(--sky-deep);
     padding: var(--space-xs) var(--space-md);
     border-radius: var(--radius-full);
     font-size: var(--font-small);
     font-weight: 600;
     margin-bottom: var(--space-md);
     border: 1px solid var(--sky-primary);
 }

 /* Table of Contents */
 .toc-box {
     background: rgba(255, 255, 255, 0.8);
     border-radius: var(--radius-lg);
     padding: var(--space-lg);
     margin-bottom: var(--space-xl);
     border: 1px solid var(--border-light);
 }

 .toc-title {
     font-size: var(--font-h4);
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: var(--space-md);
     display: flex;
     align-items: center;
     gap: var(--space-sm);
 }

 .toc-title i {
     color: var(--sky-deep);
     font-size: var(--font-h3);
 }

 .toc-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: var(--space-sm);
 }

 .toc-item {
     color: var(--text-soft);
     text-decoration: none;
     padding: var(--space-xs) var(--space-sm);
     border-radius: var(--radius-sm);
     transition: all 0.2s ease;
     font-size: var(--font-small);
 }

 .toc-item:hover {
     background: var(--sky-light);
     color: var(--sky-deep);
     transform: translateX(5px);
 }

 .toc-item i {
     font-size: var(--font-tiny);
     margin-right: var(--space-xs);
     color: var(--sky-primary);
 }

 /* Shadow Card */
 .shadow-card {
     background: var(--pure-white);
     border-radius: var(--radius-xl);
     padding: var(--space-xl) var(--space-lg);
     box-shadow: var(--shadow-lg);
     border: 1px solid rgba(203, 214, 228, 0.6);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     width: 100%;
     margin: 0 auto;
     text-align: left;
 }

 .shadow-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--card-glow);
 }

 .shadow-card h3 {
     font-size: var(--font-h2);
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: var(--space-lg);
     display: flex;
     align-items: center;
     gap: var(--space-sm);
     border-bottom: 3px solid var(--sky-light);
     padding-bottom: var(--space-sm);
 }

 .shadow-card h3 i {
     font-size: var(--font-h2);
     color: var(--sky-deep);
 }

 .shadow-card p {
     font-size: var(--font-body);
     color: var(--text-soft);
     line-height: var(--line-loose);
     margin-bottom: var(--space-md);
     text-align: left;
 }

 /* Feature Cards */
 .feature-card-about {
     background: var(--pure-white);
     border-radius: var(--radius-lg);
     padding: var(--space-lg) var(--space-md);
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
     transition: transform 0.25s ease, box-shadow 0.3s;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .feature-card-about:hover {
     transform: translateY(-5px);
     box-shadow: var(--card-glow);
     border-color: var(--sky-primary);
 }

 .feature-icon {
     background-color: var(--sky-light);
     width: 70px;
     height: 70px;
     border-radius: 26px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: var(--space-md);
     border: 1px solid rgba(61, 126, 185, 0.25);
 }

 .feature-icon i {
     font-size: 2.5rem;
     color: var(--sky-deep);
 }

 .feature-card-about h3 {
     font-size: var(--font-h3);
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: var(--space-xs);
     display: flex;
     align-items: center;
     gap: var(--space-xs);
 }

 .feature-card-about h3 i {
     font-size: var(--font-h4);
     color: var(--sky-deep);
 }

 .feature-card-about p {
     color: var(--text-soft);
     font-size: var(--font-small);
     line-height: var(--line-normal);
     margin-top: var(--space-xs);
     flex-grow: 1;
 }

 /* Vision Block */
 .vision-block {
     background: linear-gradient(145deg, #ffffff, #f0f8ff);
     border-radius: var(--radius-xl);
     padding: var(--space-xl);
     margin: var(--space-2xl) 0;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
     text-align: center;
 }

 .vision-block h2 {
     font-size: var(--font-h1);
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: var(--space-md);
 }

 .vision-block p {
     color: var(--text-soft);
     max-width: 800px;
     margin: var(--space-md) auto;
     line-height: var(--line-loose);
     font-size: var(--font-body);
 }

 /* Pill Badge */
 .pill-badge {
     background-color: var(--sky-light);
     color: var(--sky-deep);
     border-radius: var(--radius-full);
     padding: var(--space-xs) var(--space-md);
     font-size: var(--font-small);
     font-weight: 600;
     display: inline-block;
     border: 1px solid var(--sky-primary);
 }

 .pill-badge i {
     color: #00897b;
 }

 /* Stats Section */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--space-md);
     margin: var(--space-2xl) 0;
 }

 .stat-card {
     background: var(--pure-white);
     border-radius: var(--radius-lg);
     padding: var(--space-lg);
     text-align: center;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
 }

 .stat-number {
     font-size: var(--font-h2);
     font-weight: 700;
     color: var(--sky-deep);
     line-height: 1;
     margin-bottom: var(--space-xs);
 }

 .stat-label {
     color: var(--text-soft);
     font-size: var(--font-small);
     font-weight: 500;
 }

 /* Team Section */
 .team-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--space-lg);
     margin: var(--space-xl) 0;
 }

 .team-card {
     background: var(--pure-white);
     border-radius: var(--radius-lg);
     padding: var(--space-lg);
     text-align: center;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
 }

 .team-avatar {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background: var(--sky-light);
     margin: 0 auto var(--space-md);
     display: flex;
     align-items: center;
     justify-content: center;
     border: 3px solid var(--sky-primary);
 }

 .team-avatar i {
     font-size: 3.5rem;
     color: var(--sky-deep);
 }

 .team-name {
     font-size: var(--font-h4);
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: var(--space-xs);
 }

 .team-role {
     color: var(--sky-deep);
     font-size: var(--font-small);
     font-weight: 600;
     margin-bottom: var(--space-sm);
 }

 .team-bio {
     color: var(--text-soft);
     font-size: var(--font-small);
     line-height: var(--line-normal);
 }

 /* Values Section */
 .values-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--space-lg);
     margin: var(--space-xl) 0;
 }

 .value-card {
     text-align: center;
     padding: var(--space-lg);
 }

 .value-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--sky-light);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto var(--space-md);
     border: 2px dashed var(--sky-primary);
 }

 .value-icon i {
     font-size: 2.5rem;
     color: var(--sky-deep);
 }

 .value-title {
     font-size: var(--font-h4);
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: var(--space-xs);
 }

 .value-desc {
     color: var(--text-soft);
     font-size: var(--font-small);
     line-height: var(--line-normal);
 }

 /* Mobile Responsive */
 @media (max-width: 768px) {
     .about-section {
         padding: var(--space-lg) var(--space-sm);
     }

     .hero-description {
         font-size: var(--font-body);
     }

     .shadow-card {
         padding: var(--space-lg);
     }

     .shadow-card h3 {
         font-size: var(--font-h3);
     }

     .shadow-card p {
         font-size: var(--font-small);
     }

     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: var(--space-sm);
     }

     .team-grid,
     .values-grid {
         grid-template-columns: 1fr;
         gap: var(--space-md);
     }

     .stat-number {
         font-size: var(--font-h3);
     }

     .toc-grid {
         grid-template-columns: 1fr;
     }
 }