/* About Page */
.page-banner {
    background: var(--gradient-dark); color: #fff; padding: var(--space-20) 0 var(--space-16);
    position: relative; overflow: hidden;
}
.page-banner::before {
    content: ''; position: absolute; top: -200px; right: -200px; width: 500px; height: 500px;
    background: var(--primary-500); border-radius: 50%; filter: blur(120px); opacity: 0.12;
}
.page-banner-content { max-width: 700px; position: relative; z-index: 2; }
.page-banner-content h1 { color: #fff; margin-bottom: var(--space-4); }
.page-banner-content p { color: var(--gray-300); font-size: var(--text-lg); }

.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center; }
.about-text .badge { margin-bottom: var(--space-4); }
.about-text h2 { margin-bottom: var(--space-6); }
.about-text p { color: var(--gray-600); line-height: var(--leading-relaxed); }

.about-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.number-card {
    background: #fff; border-radius: var(--radius-xl); padding: var(--space-8);
    text-align: center; box-shadow: var(--shadow-card); border: 1px solid var(--gray-100);
    transition: transform var(--transition-slow);
}
.number-card:hover { transform: translateY(-4px); }
.number-card strong {
    font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 800;
    background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.number-card span { display: block; font-size: var(--text-sm); color: var(--gray-500); margin-top: var(--space-2); }

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; }
    .page-banner { padding: var(--space-16) 0 var(--space-10); }
}