.hero-about {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.92) 0%, rgba(10, 37, 64, 0.95) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cdefs%3E%3ClinearGradient id='about' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231A4A7A'/%3E%3Cstop offset='100%25' stop-color='%230F3460'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23about)' width='1200' height='600'/%3E%3Ccircle cx='600' cy='300' r='200' stroke='%23E6B325' stroke-width='1' stroke-dasharray='10 5' opacity='0.1'/%3E%3Ccircle cx='600' cy='300' r='150' stroke='%23E6B325' stroke-width='0.8' stroke-dasharray='8 4' opacity='0.08'/%3E%3Ccircle cx='600' cy='300' r='100' stroke='%23E6B325' stroke-width='0.5' stroke-dasharray='6 3' opacity='0.05'/%3E%3Ccircle cx='200' cy='150' r='8' fill='%23E6B325' opacity='0.3'/%3E%3Ccircle cx='400' cy='200' r='8' fill='%23E6B325' opacity='0.25'/%3E%3Ccircle cx='800' cy='180' r='8' fill='%23E6B325' opacity='0.3'/%3E%3Ccircle cx='1000' cy='250' r='8' fill='%23E6B325' opacity='0.25'/%3E%3Ccircle cx='300' cy='400' r='8' fill='%23E6B325' opacity='0.2'/%3E%3Ccircle cx='700' cy='420' r='8' fill='%23E6B325' opacity='0.25'/%3E%3Ccircle cx='900' cy='380' r='8' fill='%23E6B325' opacity='0.2'/%3E%3Cpath d='M200 150 L400 200 L600 300 L800 180 L1000 250' stroke='%23E6B325' stroke-width='1' opacity='0.15'/%3E%3Cpath d='M300 400 L700 420 L900 380' stroke='%23E6B325' stroke-width='1' opacity='0.1'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    min-height: 500px;
}

.bento-grid {
    gap: 16px;
}

@media (min-width: 768px) {
    .bento-grid {
        gap: 24px;
    }
}

.bento-large {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-large:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(15, 52, 96, 0.2);
}

.mission-card {
    transition: all 0.3s ease;
}

.mission-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15, 52, 96, 0.1);
}

.advantage-card {
    transition: all 0.3s ease;
}

.advantage-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15, 52, 96, 0.1);
}

.cert-card {
    transition: all 0.3s ease;
}

.cert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15, 52, 96, 0.1);
}

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #E6B325, #0F3460);
}

.timeline-item {
    position: relative;
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
    padding-right: 60px;
}

.timeline-item:nth-child(even) .timeline-content {
    text-align: left;
    padding-left: 60px;
}

.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #E6B325;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #E6B325;
    z-index: 1;
}

.timeline-content {
    width: 50%;
}

.timeline-year {
    font-size: 1.5rem;
    font-weight: 700;
    color: #E6B325;
    margin-bottom: 8px;
}

.timeline-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0F3460;
    margin-bottom: 8px;
}

.timeline-desc {
    font-size: 0.875rem;
    color: #6C757D;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .timeline-container::before {
        left: 20px;
    }
    
    .timeline-item,
    .timeline-item:nth-child(odd) {
        flex-direction: row;
    }
    
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        text-align: left;
        padding-left: 60px;
        padding-right: 0;
        width: 100%;
    }
    
    .timeline-dot {
        left: 20px;
    }
    
    .mission-card:hover,
    .advantage-card:hover,
    .cert-card:hover,
    .bento-large:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mission-card,
    .advantage-card,
    .cert-card,
    .bento-large {
        transition: none;
    }
    
    .mission-card:hover,
    .advantage-card:hover,
    .cert-card:hover,
    .bento-large:hover {
        transform: none;
    }
}