/* About CSS */
.hero-about { padding: 80px 0; background: white; }
.hero-about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero-about__heading { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 800; margin: 16px 0; color: var(--color-primary); }
.hero-about__desc { font-size: 16px; line-height: 1.7; color: var(--color-text-secondary); margin-bottom: 32px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.about-tag { background: var(--color-bg-light); padding: 8px 16px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; }
.hero-about__visual { position: relative; display: flex; justify-content: center; }
.float-card--mission { top: 0; left: 0; }
.float-card--learning { bottom: 20%; left: -20px; }
.float-card--writing { top: 20%; right: 0; }

/* Timeline */
.about-timeline { background: white; }
.timeline-intro { text-align: center; color: var(--color-text-secondary); margin-top: -16px; margin-bottom: 48px; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.timeline__line { position: absolute; top: 24px; left: 0; right: 0; height: 2px; background: var(--color-border); z-index: 1; }
.timeline__item { position: relative; z-index: 2; padding-top: 48px; }
.timeline__number { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; background: white; border: 2px solid var(--color-primary); color: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; z-index: 3; }
.timeline__card { background: var(--color-bg); padding: 32px 24px; border-radius: 16px; text-align: center; height: 100%; display: flex; flex-direction: column; }
.timeline__img-placeholder { font-size: 48px; margin-bottom: 24px; }
.timeline__card h3 { font-size: 16px; margin-bottom: 12px; }
.timeline__card p { font-size: 13px; color: var(--color-text-secondary); flex: 1; }
.timeline__year { display: inline-block; margin-top: 16px; padding: 4px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

/* Values */
.bg-light { background: var(--color-bg-light); }
.values-intro { text-align: center; color: var(--color-text-secondary); margin-top: -16px; margin-bottom: 48px; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card { background: white; padding: 32px; border-radius: 20px; text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast); }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-card__icon { width: 80px; height: 80px; background: var(--color-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px; }
.value-card h3 { font-size: 18px; margin-bottom: 12px; }
.value-card p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; }

/* Principles */
.principles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 48px; }
.principle-card { text-align: center; }
.principle-card__icon { width: 48px; height: 48px; background: var(--color-bg-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 16px; }
.principle-card h3 { font-size: 15px; margin-bottom: 8px; }
.principle-card p { font-size: 13px; color: var(--color-text-secondary); }

/* CTA */
.about-cta { background: var(--color-primary-dark); border-radius: 24px; padding: 48px; display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; color: white; }
.about-cta__content h2 { color: white; font-size: 28px; margin-bottom: 16px; }
.about-cta__content p { color: rgba(255,255,255,0.8); margin-bottom: 32px; font-size: 15px; }
.about-cta__posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 1024px) {
    .timeline { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
    .timeline__line { display: none; }
    .values__grid { grid-template-columns: repeat(2, 1fr); }
    .principles__grid { grid-template-columns: repeat(3, 1fr); }
    .about-cta { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hero-about__inner { grid-template-columns: 1fr; text-align: center; }
    .about-tags { justify-content: center; }
    .timeline { grid-template-columns: 1fr; }
    .values__grid { grid-template-columns: 1fr; }
    .principles__grid { grid-template-columns: repeat(2, 1fr); }
    .about-cta__posts { grid-template-columns: 1fr; }
}