/* ===== About Page ===== */
.about-story{padding:60px 0 80px}
@media(min-width:768px){.about-story{padding:80px 0 100px}}
.story-grid{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.story-grid{grid-template-columns:1.2fr 1fr;gap:64px}}
.story-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--accent-light);color:var(--accent-dark);border-radius:20px;font-size:13px;font-weight:600;margin-bottom:20px}
.story-content h2{font-size:28px;font-weight:700;margin-bottom:20px}
@media(min-width:768px){.story-content h2{font-size:32px}}
.story-content p{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:16px}
.story-content a{color:var(--accent);font-weight:500}

.timeline{position:relative;padding-left:32px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--border-color)}
.timeline-item{position:relative;padding:16px 0 16px 24px;transition:all .3s}
.timeline-item::before{content:'';position:absolute;left:-29px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--border-color);border:3px solid var(--bg-primary);z-index:1;transition:all .3s}
.timeline-item.active::before{background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.2)}
.timeline-year{font-size:20px;font-weight:700;color:var(--accent);margin-bottom:4px}
.timeline-item.active .timeline-year{font-size:24px}
.timeline-text{font-size:14px;color:var(--text-secondary)}
.timeline-item.active .timeline-text{font-weight:600;color:var(--text-primary)}

/* Features */
.about-features{padding:80px 0;background:var(--bg-secondary)}
.features-grid{display:grid;gap:24px}
@media(min-width:640px){.features-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.features-grid{grid-template-columns:repeat(4,1fr)}}
.feature-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:32px;text-align:center;transition:all .3s}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:var(--accent)}
.feature-num{font-size:36px;font-weight:800;color:var(--accent);margin-bottom:12px}
.feature-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.feature-card p{font-size:14px;color:var(--text-secondary);line-height:1.7}

/* Approach */
.about-approach{padding:80px 0}
.approach-grid{display:grid;gap:48px;align-items:center}
@media(min-width:1024px){.approach-grid{grid-template-columns:1.2fr 1fr;gap:64px}}
.approach-content h2{font-size:28px;font-weight:700;margin-bottom:16px}
@media(min-width:768px){.approach-content h2{font-size:32px}}
.approach-content > p{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:24px}
.approach-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.approach-item{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-secondary);line-height:1.7}
.approach-icon{width:28px;height:28px;background:var(--accent-light);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:14px;flex-shrink:0;margin-top:2px}
.approach-note{font-size:15px;color:var(--text-primary);font-weight:500;padding:16px;background:var(--accent-light);border-radius:12px}

.icon-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(-3deg)}
.mosaic-icon{width:80px;height:80px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--accent);transition:all .3s}
.mosaic-icon:hover{transform:scale(1.1) rotate(3deg);box-shadow:var(--shadow-lg);color:var(--accent-dark)}
@media(min-width:768px){.mosaic-icon{width:100px;height:100px;font-size:38px}}