/* ============================================================
   ABOUT PAGES - Unified Stylesheet
   Consistent design across all /about/ pages
   ============================================================ */

/* ============================================================
   1. ABOUT NAVIGATION - Shared across all about pages
   ============================================================ */

.about-nav {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
    padding: var(--space-3);
    background: var(--bg-card-solid);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
}

.about-nav a {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.about-nav a:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.about-nav a.active {
    background: var(--gradient-btn-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

@media (max-width: 768px) {
    .about-nav {
        gap: var(--space-2);
        padding: var(--space-2);
    }
    
    .about-nav a {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ============================================================
   2. PAGE INTRO - Centered intro text
   ============================================================ */

.page-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-12);
}

.page-intro p {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: 1.8;
}

/* ============================================================
   3. CONTENT CARDS - Unified card design
   ============================================================ */

.content-card {
    position: relative;
    padding: var(--space-8);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-btn-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.content-card:hover::before {
    transform: scaleX(1);
}

.content-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-glow);
}

/* Card color variants */
.content-card-cyan::before { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.content-card-purple::before { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.content-card-green::before { background: linear-gradient(90deg, #34d399, #10b981); }
.content-card-amber::before { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.content-card-pink::before { background: linear-gradient(90deg, #f472b6, #ec4899); }
.content-card-indigo::before { background: linear-gradient(90deg, #818cf8, #6366f1); }

.content-card-cyan:hover { border-color: #38bdf8; }
.content-card-purple:hover { border-color: #a78bfa; }
.content-card-green:hover { border-color: #34d399; }
.content-card-amber:hover { border-color: #fbbf24; }
.content-card-pink:hover { border-color: #f472b6; }
.content-card-indigo:hover { border-color: #818cf8; }

/* ============================================================
   4. CARD ICONS - Unified icon styling
   ============================================================ */

.card-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    font-size: 26px;
    margin-bottom: var(--space-5);
    transition: all 0.3s ease;
}

.card-icon-cyan { background: rgba(56, 189, 248, 0.12); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.25); }
.card-icon-purple { background: rgba(167, 139, 250, 0.12); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.25); }
.card-icon-green { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.25); }
.card-icon-amber { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.25); }
.card-icon-pink { background: rgba(244, 114, 182, 0.12); color: #f472b6; border: 1px solid rgba(244, 114, 182, 0.25); }
.card-icon-indigo { background: rgba(129, 140, 248, 0.12); color: #818cf8; border: 1px solid rgba(129, 140, 248, 0.25); }

.content-card:hover .card-icon {
    transform: scale(1.1) rotate(-5deg);
}

.content-card-cyan:hover .card-icon-cyan { background: #38bdf8; color: var(--bg-body); box-shadow: 0 0 25px rgba(56, 189, 248, 0.4); }
.content-card-purple:hover .card-icon-purple { background: #a78bfa; color: var(--bg-body); box-shadow: 0 0 25px rgba(167, 139, 250, 0.4); }
.content-card-green:hover .card-icon-green { background: #34d399; color: var(--bg-body); box-shadow: 0 0 25px rgba(52, 211, 153, 0.4); }
.content-card-amber:hover .card-icon-amber { background: #fbbf24; color: var(--bg-body); box-shadow: 0 0 25px rgba(251, 191, 36, 0.4); }
.content-card-pink:hover .card-icon-pink { background: #f472b6; color: var(--bg-body); box-shadow: 0 0 25px rgba(244, 114, 182, 0.4); }
.content-card-indigo:hover .card-icon-indigo { background: #818cf8; color: var(--bg-body); box-shadow: 0 0 25px rgba(129, 140, 248, 0.4); }

/* Gradient icons for hero cards */
.card-icon-gradient {
    width: 80px;
    height: 80px;
    font-size: 32px;
    border-radius: 50%;
    border: none;
}

.card-icon-gradient.cyan { background: linear-gradient(135deg, #0ea5e9, #38bdf8); color: white; }
.card-icon-gradient.purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; }
.card-icon-gradient.green { background: linear-gradient(135deg, #10b981, #34d399); color: white; }

/* ============================================================
   5. CARD NUMBER BADGE
   ============================================================ */

.card-number {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
}

/* ============================================================
   6. CARD CONTENT
   ============================================================ */

.content-card h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

.content-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   7. GRID LAYOUTS
   ============================================================ */

.cards-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.cards-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.cards-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.cards-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
}

@media (max-width: 1200px) {
    .cards-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .cards-grid-2,
    .cards-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cards-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   8. ABOUT OVERVIEW - Two column layout
   ============================================================ */

.about-content-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

.about-main-text h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-bottom: var(--space-6);
    color: var(--text-primary);
}

.about-main-text .lead {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-6);
}

.about-main-text p {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

/* X Explanation Box */
.x-explanation-box {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(167, 139, 250, 0.08));
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-top: var(--space-8);
}

.x-explanation-box h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.x-explanation-box .x-letter {
    font-size: var(--text-2xl);
    font-weight: 800;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.x-explanation-box p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Quick Facts Sidebar */
.quick-facts-sidebar {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    position: sticky;
    top: 100px;
}

.quick-facts-sidebar h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-primary);
}

.quick-facts-sidebar h4 i {
    color: var(--accent-cyan);
}

.facts-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
}

.facts-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
}

.facts-list li:last-child {
    border-bottom: none;
}

.facts-list .fact-label {
    color: var(--text-muted);
}

.facts-list .fact-value {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

/* Explore Links */
.explore-links h5 {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.explore-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.explore-links li a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.explore-links li a:hover {
    color: var(--accent-cyan);
    transform: translateX(4px);
}

.explore-links li a i {
    font-size: var(--text-xs);
    transition: transform 0.2s ease;
}

.explore-links li a:hover i {
    transform: translateX(2px);
}

@media (max-width: 1024px) {
    .about-content-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-facts-sidebar {
        position: static;
    }
}

/* ============================================================
   9. VISION & MISSION CARDS
   ============================================================ */

.vm-card {
    position: relative;
    padding: var(--space-10);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: all 0.4s ease;
}

.vm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.vm-card-vision::before { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.vm-card-mission::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

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

.vm-card-vision:hover { border-color: #0ea5e9; }
.vm-card-mission:hover { border-color: #8b5cf6; }

.vm-icon-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: var(--space-6);
    font-size: 32px;
    transition: all 0.3s ease;
}

.vm-card-vision .vm-icon-wrap {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(56, 189, 248, 0.1));
    color: #0ea5e9;
}

.vm-card-mission .vm-icon-wrap {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(167, 139, 250, 0.1));
    color: #8b5cf6;
}

.vm-card:hover .vm-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
}

.vm-card h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.vm-quote {
    position: relative;
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.6;
    padding: var(--space-6);
    margin: var(--space-6) 0;
    border-radius: var(--radius-xl);
    font-style: italic;
}

.vm-card-vision .vm-quote {
    background: rgba(14, 165, 233, 0.08);
    border-left: 4px solid #0ea5e9;
    color: #38bdf8;
}

.vm-card-mission .vm-quote {
    background: rgba(139, 92, 246, 0.08);
    border-left: 4px solid #8b5cf6;
    color: #a78bfa;
}

.vm-card > p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   10. VALUES SECTION
   ============================================================ */

.values-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    border: 1px solid var(--border-subtle);
}

.value-card {
    text-align: center;
    padding: var(--space-6);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}

.value-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.value-card i {
    font-size: 32px;
    margin-bottom: var(--space-4);
    display: block;
}

.value-card:nth-child(1) i { color: #0ea5e9; }
.value-card:nth-child(2) i { color: #8b5cf6; }
.value-card:nth-child(3) i { color: #10b981; }
.value-card:nth-child(4) i { color: #f59e0b; }

.value-card h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.value-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .values-section {
        padding: var(--space-8);
    }
}

/* ============================================================
   11. PRINCIPLES LIST
   ============================================================ */

.principle-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}

.principle-item:hover {
    border-color: var(--accent-cyan);
    transform: translateX(4px);
}

.principle-number {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-btn-primary);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: var(--text-sm);
}

.principle-content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.principle-content p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   12. IMPACT STATS
   ============================================================ */

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.impact-item {
    text-align: center;
    padding: var(--space-8);
    background: var(--bg-card-solid);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.impact-item:hover {
    transform: translateY(-4px);
    border-color: var(--accent-cyan);
}

.impact-value {
    font-size: var(--text-4xl);
    font-weight: 800;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
    line-height: 1;
}

.impact-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .impact-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   13. GOVERNANCE ORG CHART
   ============================================================ */

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
}

.org-level {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.org-card {
    position: relative;
    width: 280px;
    padding: var(--space-6);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.3s ease;
}

.org-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}

.org-card.org-primary {
    border-color: var(--accent-purple);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(56, 189, 248, 0.08));
}

.org-card.org-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.org-role {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(56, 189, 248, 0.12);
    color: var(--accent-cyan);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.org-card h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.org-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.org-connector {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, var(--accent-purple), var(--accent-cyan));
}

@media (max-width: 768px) {
    .org-level {
        flex-direction: column;
        align-items: center;
    }
    
    .org-card {
        width: 100%;
        max-width: 320px;
    }
}

/* ============================================================
   14. COMMITTEES GRID
   ============================================================ */

.committee-card {
    padding: var(--space-8);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    transition: all 0.3s ease;
}

.committee-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.committee-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(56, 189, 248, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: var(--radius-lg);
    font-size: 22px;
    margin-bottom: var(--space-4);
    transition: all 0.3s ease;
}

.committee-card:hover .committee-icon {
    background: var(--accent-cyan);
    color: var(--bg-body);
    transform: scale(1.1);
}

.committee-card h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.committee-card > p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.committee-members {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.committee-member {
    padding: var(--space-1) var(--space-3);
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ============================================================
   15. DIFFERENTIATORS (Why AlfaisalX)
   ============================================================ */

.diff-card {
    position: relative;
    padding: var(--space-8);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    text-align: center;
    transition: all 0.4s ease;
    overflow: hidden;
}

.diff-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-btn-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.diff-card:hover::after {
    transform: scaleX(1);
}

.diff-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow-glow);
}

.diff-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    font-size: 32px;
    color: white;
    transition: all 0.3s ease;
}

.diff-card:nth-child(1) .diff-icon { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.diff-card:nth-child(2) .diff-icon { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.diff-card:nth-child(3) .diff-icon { background: linear-gradient(135deg, #10b981, #059669); }

.diff-card:hover .diff-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.diff-card h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.diff-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   16. FEATURES LIST
   ============================================================ */

.features-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    border: 1px solid var(--border-subtle);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

.feature-item {
    display: flex;
    gap: var(--space-4);
}

.feature-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(56, 189, 248, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: var(--radius-lg);
    font-size: 22px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    background: var(--accent-cyan);
    color: var(--bg-body);
    transform: scale(1.05);
}

.feature-content h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.feature-content p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .features-section {
        padding: var(--space-8);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   17. COMPARISON TABLE
   ============================================================ */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card-solid);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-5);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--text-primary);
}

.comparison-table th:first-child {
    width: 50%;
}

.comparison-table td {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table .check {
    color: #10b981;
    font-size: var(--text-lg);
}

.comparison-highlight {
    background: rgba(56, 189, 248, 0.05);
}

/* ============================================================
   18. ALIGNMENT CARDS
   ============================================================ */

.alignment-card {
    padding: var(--space-8);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.3s ease;
}

.alignment-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.alignment-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    border-radius: var(--radius-xl);
    font-size: 26px;
    transition: all 0.3s ease;
}

.alignment-card:nth-child(1) .alignment-icon { background: rgba(56, 189, 248, 0.12); color: #38bdf8; }
.alignment-card:nth-child(2) .alignment-icon { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.alignment-card:nth-child(3) .alignment-icon { background: rgba(52, 211, 153, 0.12); color: #34d399; }

.alignment-card:hover .alignment-icon {
    transform: scale(1.1);
}

.alignment-card h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.alignment-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   19. LIGHT MODE ADJUSTMENTS
   ============================================================ */

[data-theme="light"] .content-card,
[data-theme="light"] .vm-card,
[data-theme="light"] .diff-card,
[data-theme="light"] .org-card,
[data-theme="light"] .committee-card,
[data-theme="light"] .alignment-card,
[data-theme="light"] .value-card,
[data-theme="light"] .impact-item,
[data-theme="light"] .principle-item,
[data-theme="light"] .quick-facts-sidebar {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .content-card:hover,
[data-theme="light"] .vm-card:hover,
[data-theme="light"] .diff-card:hover,
[data-theme="light"] .org-card:hover,
[data-theme="light"] .committee-card:hover,
[data-theme="light"] .alignment-card:hover,
[data-theme="light"] .value-card:hover,
[data-theme="light"] .impact-item:hover,
[data-theme="light"] .principle-item:hover {
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.12), 0 4px 10px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .content-card h3,
[data-theme="light"] .vm-card h2,
[data-theme="light"] .diff-card h3,
[data-theme="light"] .org-card h3,
[data-theme="light"] .committee-card h3,
[data-theme="light"] .alignment-card h3,
[data-theme="light"] .value-card h3,
[data-theme="light"] .principle-content h4 {
    color: #0f172a;
}

[data-theme="light"] .content-card p,
[data-theme="light"] .vm-card > p,
[data-theme="light"] .diff-card p,
[data-theme="light"] .org-card p,
[data-theme="light"] .committee-card > p,
[data-theme="light"] .alignment-card p,
[data-theme="light"] .value-card p,
[data-theme="light"] .principle-content p {
    color: #475569;
}

[data-theme="light"] .values-section,
[data-theme="light"] .features-section {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

[data-theme="light"] .x-explanation-box {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(139, 92, 246, 0.06));
    border-color: rgba(14, 165, 233, 0.2);
}

[data-theme="light"] .comparison-table {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .comparison-table th {
    background: #f8fafc;
    color: #0f172a;
}

[data-theme="light"] .comparison-table td {
    color: #475569;
}

[data-theme="light"] .comparison-highlight {
    background: rgba(14, 165, 233, 0.04);
}

[data-theme="light"] .about-nav {
    background: #ffffff;
    border-color: #e2e8f0;
}

[data-theme="light"] .about-nav a {
    color: #475569;
}

[data-theme="light"] .about-nav a:hover {
    background: #f1f5f9;
    color: #0f172a;
}

[data-theme="light"] .about-nav a.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #ffffff;
}

[data-theme="light"] .page-intro p {
    color: #475569;
}

[data-theme="light"] .impact-value {
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .impact-label {
    color: #64748b;
}

[data-theme="light"] .card-icon-cyan { background: rgba(14, 165, 233, 0.1); color: #0284c7; border-color: rgba(14, 165, 233, 0.2); }
[data-theme="light"] .card-icon-purple { background: rgba(139, 92, 246, 0.1); color: #7c3aed; border-color: rgba(139, 92, 246, 0.2); }
[data-theme="light"] .card-icon-green { background: rgba(16, 185, 129, 0.1); color: #059669; border-color: rgba(16, 185, 129, 0.2); }
[data-theme="light"] .card-icon-amber { background: rgba(245, 158, 11, 0.1); color: #d97706; border-color: rgba(245, 158, 11, 0.2); }
[data-theme="light"] .card-icon-pink { background: rgba(236, 72, 153, 0.1); color: #db2777; border-color: rgba(236, 72, 153, 0.2); }
[data-theme="light"] .card-icon-indigo { background: rgba(99, 102, 241, 0.1); color: #4f46e5; border-color: rgba(99, 102, 241, 0.2); }

[data-theme="light"] .card-number {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

/* ============================================================
   20. SPACING UTILITIES
   ============================================================ */

.section-spacing {
    margin-top: var(--space-16);
}